journal.kanpintan

webコンサルタント、web制作してます。小麦アレルギー(グルテン不耐症?)でグルテンフリー生活してます。

【Adobe】Typekitでwebフォントを使ってみた

はじめに

仕事ではじめてTypekitをwebフォントで使いました。せっかくAdobe Creative Cloud使ってるんだから、使ってみたいな〜と、自社サイトで試してみることにしました。

Typekitでフォントを探す

直接アクセスする場合はコチラ typekit.com

デスクトップアプリからもアクセスできます。 f:id:arugatter:20180515201233p:plain

今回はwebフォントで使用します。見出しに使いやすいフォントを絞り込み検索できるのは便利。 f:id:arugatter:20180515201333p:plain

webフォントとして使う

ここからは画像がないので申し訳ないです。*1

まず、選んだフォントの詳細画面から「キットに追加」を選択します。すると、使用するサイトのドメインを追加するページになり、ドメインを追加すると埋め込みコードが表示されます。

その埋め込みコードを使用するサイトに追記して、公開ボタンを押すとwebフォントが使用できるようになりました!

CSSでフォントを使用」をクリックすると使用方法が表示されます。使用したいところで、ここで表示されたfont-family値を指定してあげればOKです。

おわりに

今回はAdobeCCのTypekitのwebフォントでしたが、実は先日、会社でMORISAWA PASSPORTを契約してもらいました。次回はモリサワのwebフォントを使ってみようと思います(^^)

あ〜、AdobeCCとモリサワが自由に使える環境で本当に幸せ。

*1:覚えていたら、後日追加します。