こんにちは、mickです。
プラグインを使わずにWebフォントを使いたい
英語フォントと日本語フォントを分けて使いたい
こんな要望に応えます。
WebフォントをWordPressで使う
WebフォントをWordPressで使います。
今回は Google Fonts を利用します。
WordPressに直接組み込むので、プラグイン不要です。
Google Fonts でWebフォントを選ぶ
Google Fonts から2つのフォントを選びます。
- 英語フォントは Lato
- 日本語フォントは Kosugi
英語フォントと日本語フォントは分けた方が見栄えがいいので2つ使います。
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」にある記述を参考にします。
これでWebサイトにWebフォントが適用できましました。
おつかれさまでした。
Webフォントなどの再描画によるちらつきは「Flash Of Unstyled Text (FOUT)」といいます。
まとめ。
WebフォントをWordPressで使う方法を紹介しました。
少しHTMLやCSSの知識は必要ですが、プラグインを使わずにWebフォントが使えます。
プラグインGoogle Fonts Typographyを使う方法も紹介しています。
こちらはプログラムの知識不要でWebフォントを使えます。
よければ見てみてください。
以上、みなさまの助けなれば幸いです。
初稿 2020/10/01