YOUR ACCELERATOR

USE MOUSE TO DRAW NETWORK NODES

WEB DESIGNER'S BLOG

Typekitの日本語Webフォントが便利!

2015年7月27日

sekiya

sekiya20150727_1

AdobeのCreative Cloudに登録していると無料で使うことのできるTypekitに日本語のWebフォントが追加されていたので使い方をまとめてみました。
ライセンスフリーのフォントをWebフォント化して使用するのと比べてTypekitはサブセット化を自動でしてくれたりするので便利です!

Typekitで日本語Webフォントを実装する方法

1.フォントを選ぶ
sekiya20150727_2

右側にある各項目から用途にあったものを選択すると左側に一覧が表示されるので選択します。
今回は日本語のWebフォンなので「ブラウズモード」を日本語と「表示」をWebにして「りょうゴシック」を選択しました。

2.利用方法を選ぶ

sekiya20150727_3
フォントを選択すると上の画像のようになるので「Web」を選択します。
初めて利用する場合はキットがないのでキットの作成をします。

3.キットの作成

sekiya20150727_4
ポップアップが開くのでサイト名とWebフォントを使用するサイトのドメインを入力します。後から変更や追加もできます。

4.コードの埋め込み

sekiya20150727_5
キットを作成するとフォントを反映させるためのコードが表示されるのでコピーしてhtmlファイルのタグの直前に貼り付けます。

5.キット設定とcssファイルへの反映

sekiya20150727_6
「キット<>」から作成したキットを選択して上記画像を表示させます。ここで使用するフォントの太さや文字セットの項目を選択して「公開」をクリックしてサイトへ反映させます。
これで準備は完了したので「CSS でフォントを使用」からソースをコピーして使用したい箇所にcssのfont-familyで記述をすると実装完了となります。

Category

Recent Posts

Tag Cloud