WordPressでGoogleフォントを使用するとき #1

PCやMacで使用する日本語フォントは印刷物などを制作する場ではOSに付随するフォント以外にも有料無料問わず多くの日本語フォントが古くから使用されてきました。
後発のインターネットの世界では1990年代、2000年代前半頃くらいまでは日本語で使用される（使用できる）フォントは「MS明朝」「MSゴシック」「osaka」ぐらいだったかと思います。

当時から特定のフォントを使用してWebページを表示する手法はあったものの、使用できる日本語フォントがほとんど存在しない状態でした。
私の記憶では2000年前後くらいからフリーのフォントが手に入るサイトが徐々に増え始めていたように思います。
　フリーフォント サイト例　1001 free fonts

とても魅力的なフォントが当時から数多くのサイトに掲載されておりましたが、残念ながらほぼ全てが英語のみの対応という時代でした。Googleフォントでさえ初期の頃は日本語のフォントはほんの限られた数のみの掲載だったように記憶しています。

現在のGoogleフォントでは日本語のみならずマルチバイト文字のフォントは多数掲載されており、使用されている方も多いと思います。
今回はそのGoogleフォントをWordPressで使用する際の方法について少し考えてみます。

　Googleフォント サイト　Google Fonts

GoogleフォントをWebページで使用するにはGoogleフォントのサイトに掲載のある通り、通常は下記のような記述をHTMLのheadタグ内とスタイルシートに記述します。
　※下記はフォントに「Roboto」と「Bitcount」を選択し、font-weightなどのオプションをすべて選択した状態の例です。
　※スタイルシートの font-weight や font-variation-settings の値は適切な値を設定し、クラス名は必要な形で指定します。

HTML headタグ内に追加する記述　Google Fonts より

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitcount:slnt,wght,CRSV,ELSH,ELXP@-8..0,100..900,0..1,0..100,0..100&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap" rel="stylesheet">

CSS stylesheetに追加する記述　Google Fonts より

.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}

.bitcount-<uniquifier> {
  font-family: "Bitcount", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" <slant>,
    "CRSV" <cursive>,
    "ELSH" <element shape>,
    "ELXP" <element expansion>;
}

上記の例ではGoogleフォントの読み込み設定で全てのオプション（ Weight や Slant など）を指定しましたが、この部分は可能であれば一つの値のみを設定した方がロードする容量が減り、早く読み込めるということになります。
また、スタイルシートの記述についても必要最低限のもののみ記述すると下記のようになります。

HTML headタグ内に追加する記述

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitcount&family=Roboto&display=swap" rel="stylesheet">

CSS スタイルシートに追加する記述

/* サイト全体にGoogleフォントを設定するのであればフォント名称と総称フォント名も指定 */
body {
  font-family: "Roboto", sans-serif;
}

/* サイト内でスポット的にGoogleフォントを使用するのであれば適切なクラス名で有効になるよう設定 */
.roboto {
  font-family: "Roboto";
}

.bitcount {
  font-family: "Bitcount";
}

上記のheadタグ内への記述はテーマファイルのheader.phpに、CSSの方はstyle.cssに記述すれば、WordPressサイトでGoogleフォントを利用することは基本的には可能となります。

WordPressのhookを利用してこれらの記述を挿入する方法についてはまた改めてご紹介させていただきます。