Typekitの日本語Webフォントが便利！
2015年7月27日
sekiya
AdobeのCreative Cloudに登録していると無料で使うことのできるTypekitに日本語のWebフォントが追加されていたので使い方をまとめてみました。
ライセンスフリーのフォントをWebフォント化して使用するのと比べてTypekitはサブセット化を自動でしてくれたりするので便利です!
Typekitで日本語Webフォントを実装する方法
1.フォントを選ぶ
右側にある各項目から用途にあったものを選択すると左側に一覧が表示されるので選択します。
今回は日本語のWebフォンなので「ブラウズモード」を日本語と「表示」をWebにして「りょうゴシック」を選択しました。
2.利用方法を選ぶ
フォントを選択すると上の画像のようになるので「Web」を選択します。
初めて利用する場合はキットがないのでキットの作成をします。
3.キットの作成
ポップアップが開くのでサイト名とWebフォントを使用するサイトのドメインを入力します。後から変更や追加もできます。
4.コードの埋め込み
キットを作成するとフォントを反映させるためのコードが表示されるのでコピーしてhtmlファイルのタグの直前に貼り付けます。
5.キット設定とcssファイルへの反映
「キット<>」から作成したキットを選択して上記画像を表示させます。ここで使用するフォントの太さや文字セットの項目を選択して「公開」をクリックしてサイトへ反映させます。
これで準備は完了したので「CSS でフォントを使用」からソースをコピーして使用したい箇所にcssのfont-familyで記述をすると実装完了となります。