Divi で Adobe Fonts（旧Typekit）を使う！

Divi ではデフォルトでたくさんフォントが使えるようになっていますが、日本語フォントは弱い...。
Google Fonts の日本語フォントも使えるのですが、いまいちバリエーションが少なく。

ちなみにデフォルトで Divi の日本語版で使われるのは Noto Sans なのですが、こちらも劇的に重くて有名。

そこで、 Divi で、もっとも優れたウェブフォントサービスである Adobe Fonts を使ってみました。

ちなみに、Adobe Fonts を簡単に使うための有名なプラグインはあるのですが、当記事を書いている時点でサポートしている Wordpress バージョンが 4.2 ということで、こちらは使わず主導で導入します。プラグインの管理大変ですしね。
wordpress.org

fonts.adobe.com
お気に入りのフォントを、マイ Web プロジェクトに追加しておきます。
詳細は割愛。

header.php をさわるので、子テーマを作っておきます。
lake-michigan.hatenablog.com

Adobe Fonts のマイ Web プロジェクトの「プロジェクトの埋め込み」に表示されているスクリプトをコピーする。
Wordpress 管理画面から、外観 > テーマエディターで子テーマの header.php を開く。
タグを探して、との間に先ほどのスクリプトをペースト。

管理画面の Divi メニュー > テーマのオプション > カスタム css に、フォントの指定を追記します。
ちなみに私はグローバルなデフォルトフォントを設定したくて、以下のようにアスタリスクで指定していたのですが、

* {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-style: normal;
	font-weight: 400;	
}

これだとなぜか見出しテキスト（H1〜H6）に反映されず...
デフォルトのCSSに倣って以下のように指定することで、見出しでも使えるようになりました。

body, h1, h2, h3, h4, h5, h6, input, textarea, select {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-style: normal;
	font-weight: 400;	
}

に typekit スクリプトを追記するだけであれば、左ペインの Divi > テーマのオプション > 「統合」タブ > 「コードをブログの < head > に追加する。」から入力することもできるので、その場合はわざわざ子テーマを作る必要がない。

MB blog