theme.jsonを利用してGoogleFontsを使う方法

ブロックテーマですと、簡単にGoogleFontsが利用できる仕組みがあるります。しかし、ハイブリットでは、CDNを使わずにtheme.jsonを使って使用する方法が少し分かりにくかったので、解説したいと思います。

目次

Google Fontsのサイトから、フォントをダウンロードする

GoogleFontのサイトへ移動します。

使いたいフォント(この説明ではNoto Sans Japanese)を検索して、右のGet fontsボタンをクリック

Download allボタンクリックでフォントをダウンロードできます。

使用するテーマのフォルダに使用するフォントを置く

ダウンロードしたフォルダを解凍します。今回は太さが標準のもの(NotoSansJP-Regular.ttf)と、ボールド(NotoSansJP-Bold.ttf)を使いますので、theme内のフォルダ(ここでは、assets/font)にコピペします。

theme.jsonでの指定

theme.jsonでこのように設定します。srcはフォントを設置した場所です。

詳細は、こちらの記事がとても分かりやすいです。

"typography": {
  "fontFamilies": [
      {
          "fontFace": [
              {
                  "fontDisplay": "block",
                  "fontFamily": "Noto Sans JP",
                  "fontStretch": "normal",
                  "fontStyle": "normal",
                  "fontWeight": "400",
                  "src": ["file:./assets/font/NotoSansJP-Regular.ttf"]
              },
              {
                  "fontDisplay": "block",
                  "fontFamily": "Noto Sans JP",
                  "fontStretch": "normal",
                  "fontStyle": "normal",
                  "fontWeight": "700",
                  "src": ["file:./assets/font/NotoSansJP-Bold.ttf"]
              }
          ],
          "fontFamily": "Noto Sans JP",
          "name": "Noto Sans JP",
          "slug": "noto-sans-jp"
      }
  ],
}

theme.jsonでサイト全体のフォント指定をする

サイト全体のフォントファミリーの指定を、先ほどtheme.jsonで指定したフォント(Noto Sans JP)にしたい場合は下記のようにtheme.jsonで指定します。

先ほどの指定で、変数「–wp–preset–font-family–noto-sans-jp」でNoto Sans JPが指定できるので、それを使って、theme.jsonで設定します。

"styles": {
  "typography": {
      "fontFamily": "var(--wp--preset--font-family--noto-sans-jp)"
  }
}

まとめ

冒頭で分かりづらいと言いましたが、慣れると難しい事はないですね。CDNで設置など他にも選択肢はあると思いますが、theme.jsonを使用すると、管理画面からフォントを指定できたり、色々便利です。