Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

Adobe TypekitのWebフォントをはてなブログに導入する方法

f:id:life-is-bitter:20160418151836j:plain

ブラウザでの表示パフォーマンスが向上してきた近年、大小問わず様々なサイトでWebフォントが使われるようになりました。はてなブログユーザーもよくGoogle Fontsを使ってのカスタマイズをしていますよね。

今回は、上にある過去の記事でも紹介したAdobe TypekitのWebフォントをはてなブログで利用するための手順を自分がカスタマイズをしたときの覚書としてまとめました。

Adobe TypekitのWebフォント導入手順

1. まずは登録をしましょう

まず、Adobe IDを持っていない人は登録をしましょう。
こちらからTypekitのサイトにアクセスして「無料体験版の使用を開始」で登録に進みます。

f:id:life-is-bitter:20160418153431p:plain

2. ライブラリにアクセスする

Adobe IDを登録してログインをしたら以下のライブラリにアクセスします。

f:id:life-is-bitter:20160418154256p:plain

3. キットを作成する

WEBで使用するために右上にある「キット」から「新しいキットを作成」をします。

f:id:life-is-bitter:20160418154402p:plain

クリックすると別窓で以下の画面が出てくるので、「名前」(キットを区別するためのものなので何でもよい。今回はテストにしました。)とドメインを入力して続行します。私のサイトの場合は「www.life-is-bitter.com」ですね。

f:id:life-is-bitter:20160418154853p:plain

その後、埋め込み用のコードが表示されます。

f:id:life-is-bitter:20160418155031p:plain

4. 埋め込み用コードを<head>に追加する

先ほどの埋め込み用コードをコピーしておき、はてなブログの[設定]→[詳細設定]→[検索エンジン最適化]→[headに要素を追加]へとペーストします。

f:id:life-is-bitter:20160418155304p:plain

ペーストできましたらこの別窓のウィンドウは消して大丈夫です。

f:id:life-is-bitter:20160418155618p:plain

5. ライブラリから使用するフォントを選ぶ

ライブラリページから使用したいフォントを検索しクリックすると右上に「フォントを使用」ボタンがあるのでそこから追加します。

f:id:life-is-bitter:20160418160454p:plain

Webタブに進み、作成したキットを選択すると日本語フォントの場合ダイナミックキットに変換するよう言われますが、これは変換します。

f:id:life-is-bitter:20160418160518p:plain

その後、以下のようなページが出れば大丈夫です。

f:id:life-is-bitter:20160418160805p:plain

6. Webフォントを適用させたい部分のセレクタやクラスを追加する

左上の「セレクター」からWebフォントを適用させたいセレクタやクラスを追加します。セレクタとはCSSにおける要素を指定するためのものだそうです。私の場合、記事タイトルに適用したかったので「a.entry-title-link.bookmark」と入力して追加しました。サイト全体なら「body」ですしそこらへんは自分のカスタマイズ内容に合わせてくださいね。

f:id:life-is-bitter:20160418161448p:plain

あとは右下の公開ボタンを押せば、数分後には適用されています!

おまけ

中には自分がWebフォントを適用したい部分のセレクタがわからない!という方もいるかと思います。そういうときはChromeになりますが、要素の検証を使えばわかります。詳しくは以下のページが参考になります。

Typekitは無料で使用する場合、利用条件と使えるフォントの種類に制限がありますが、もし気に入ったら課金してみるのもありかもしれません。Creative Cloudを利用している人は追加料金なしでフルバージョンを利用できるのでおトクですね。それでは、良いカスタマイズ生活を! 

Adobe Creative Cloud コンプリート 12か月版 Windows/Mac対応 [オンラインコード]

Adobe Creative Cloud コンプリート 12か月版 Windows/Mac対応 [オンラインコード]