【プラグイン不要】WebフォントをWordPressで使う方法【英語と日本語の両方を使う】

こんにちは、mickです。

プラグインを使わずにWebフォントを使いたい
英語フォントと日本語フォントを分けて使いたい

こんな要望に応えます。

WebフォントをWordPressで使う
- Google Fonts でWebフォントを選ぶ
- Webフォントを使うlink要素をWordPressに組み込む
まとめ。

WebフォントをWordPressで使う

WebフォントをWordPressで使います。

今回は Google Fonts を利用します。

WordPressに直接組み込むので、プラグイン不要です。

Google Fonts でWebフォントを選ぶ

Google Fonts から2つのフォントを選びます。

英語フォントは Lato
日本語フォントは Kosugi

英語フォントと日本語フォントは分けた方が見栄えがいいので2つ使います。

Webフォントの選び方

まずは Google Fonts のWebサイトに行きます。

⇒ Google Fonts Webサイト

検索（Search）の右横にある文字入力（Type something）にサンプルの文字列を入力します。

文字列の表示を確認しながらWebフォントを選ぶことができます。

ここで「日本語とEnglish」と英語と日本語を交ぜています。
理由は、日本語にしていないフォントは日本語の表示がでないのを確認するためです。

日本語のWebフォント Kosugi を選ぶ

最初は、日本語に対応しているフォントを探します。

検索（Search）の下にある言語（Language）から日本語（Japanese）を選びます。

これで一覧には日本語に対応したフォントしかでてきません。

一覧から「Kosugi」を選びます。

選んだWebフォント「Kosugi」の画面がでてきます。
「＋ Select this style」をクリックします。

Webフォントが画面右のリストに載ります。

英語のWebフォント Lato を選ぶ

次に、英語のフォントを検索（Search）に入力して探します。
ここでは「Lato」を検索しています。

英語のフォントは数多くあるため、人気ランキングの上位から試して決めました。

上位ランクのソースは Google Fonts ランキング。

Roboto
Open Sans
Lato
Oswald
Montserrat
Roboto Condensed
Source Sans Pro

この中から選んだWebフォント「Lato」の画面がでてきます。

太さや斜体といったフォントのデザインによっていくつかのスタイルがあります。
ここでは最も使う2つの普通フォント「400」と太字フォント「700」を選びます。
それぞれの「＋ Select this style」をクリックして追加完了です。

すべてのスタイルを選ばない理由は、すべて選んでしまうとWebフォントの容量が大きくなるから。
結果、Webサイトの表示速度が遅くなってしまいます。

Webフォントを使うlink要素をWordPressに組み込む

Webフォントを選んだら、そのWebフォントを使えるようにしていきます。

head要素にWebフォントのlinkタグを組み込む

「Selected families」の「Embed」にあるlink要素のタグをコピーします。

<link href="https://fonts.googleapis.com/css2?family=Kosugi&family=Lato:wght@400;700&display=swap" rel="stylesheet">

これをhead要素に組み込みます。

Cocoonの場合、テーマエディターで次の場所に追記します。

「Cocoon Child」＞「tmp-user」＞「head-insert.php」

次にCSSを書いていきます。

style.cssでWebフォントを使う要素を指定する

最後にstyle.cssを編集してWebフォントをWebサイトに反映していきます。
テーマエディターから行います。

「Cocoon Child」＞「style.css」

ここではWebサイト全体に反映するのでheader要素、body要素、そしてfooter要素に適応します（WordPressテーマのCocoonの場合）。
普通は、html要素だけでもいいです。

また、visibility: hidden;とvisibility: visible;を使ってWebフォントの再描画によるちらつきを防止しています。

/* Web Font をあてる。英字にLatoを、日本語はKosugiを。 */
/* 環境によってはhtml要素だけでもいい */
body,
header,
footer {
	font-family: 'Lato', 'Kosugi', sans-serif;
}
/* Webフォントの読み込みによるちらつきを防止する */
html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

読み込み時のhtmlタグは、読み込みが終わるとhtmlタグにwf-activeクラスが付くようになっています。
これを利用した再描画のちらつき防止の仕組みです。

また、font-familyでは「Lato」を先に指定します。
そうすることで「Lato」に日本語フォントがないときに「Kosugi」を使うようになります。

font-familyは「Selected families」の「Embed」にある記述を参考にします。