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