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

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

こんにちは、mickです。

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

こんな要望に応えます。

WebフォントをWordPressで使う

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

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

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

Google Fonts でWebフォントを選ぶ

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

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

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

Webフォントの選び方

Google FontsのWebサイト
Google FontsのWebサイト

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

⇒ Google Fonts Webサイト

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

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

表示サンプルの文字列を使ってWebフォントのプレビューを確認する
表示サンプルの文字列を使ってWebフォントのプレビューを確認する

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

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

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

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

日本語対応のWebフォントを指定して選びやすくする
日本語対応のWebフォントを指定して選びやすくする

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

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

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

「+Select this style」をクリックしてWebフォントを追加
「+Select this style」をクリックしてWebフォントを追加

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

追加したWebフォントがリストに載る
追加したWebフォントがリストに載る

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

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

英語のWebフォント「Lato」を検索
英語のWebフォント「Lato」を検索

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

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

  1. Roboto
  2. Open Sans
  3. Lato
  4. Oswald
  5. Montserrat
  6. Roboto Condensed
  7. Source Sans Pro

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

英語のWebフォント「Lato」の画面
英語のWebフォント「Lato」の画面

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

Regularの400とBoldの700を選ぶ
Regularの400とBoldの700を選ぶ

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

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

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

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

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

選んだWebフォントのリストのEmbedからlink要素のタグをコピーする
選んだWebフォントのリストの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」

Webフォントのlinkタグをhead要素の中に貼り付ける
Webフォントのlinkタグをhead要素の中に貼り付ける

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

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

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

「Cocoon Child」>「style.css」

style.cssを編集する
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」にある記述を参考にします。

font-familyの書き方
font-familyの書き方

これでWebサイトにWebフォントが適用できましました。

おつかれさまでした。

Webフォントなどの再描画によるちらつきは「Flash Of Unstyled Text (FOUT)」といいます。

まとめ。

WebフォントをWordPressで使う方法を紹介しました。

少しHTMLやCSSの知識は必要ですが、プラグインを使わずにWebフォントが使えます。

プラグインGoogle Fonts Typographyを使う方法も紹介しています。
こちらはプログラムの知識不要でWebフォントを使えます。
よければ見てみてください。

以上、みなさまの助けなれば幸いです。

初稿 2020/10/01