ブロックテーマで（Google Fonts以外の）日本語Webフォントを使う

実は少し前にこのサイトをブロックテーマに切り替えました。
クラシックテーマからブロックテーマへの切り替えについては別の記事でまとめたいと思いますが、これは書いといたほうがいいかなと思うことがありましたので、先に記事にします。

それは、ブロックテーマでGoogle Fonts以外の日本語Webフォントを使う方法についてです。

すでにWordPressに詳しい方がたくさん記事を書いておられますが、ほぼ Google Fonts についての記述しかなく、Adobe Fonts、FONTPLUS、TypeSquare などのサービスを使っている場合には残念ながらあまり役に立たないと思われるからです。

ブロックテーマでは簡単にカスタムフォントが使える　

ブロックテーマでは theme.json に数行記述するだけで、ブロックで選択できるフォントに好きなフォントを追加できます。
エディター > スタイル > タイポグラフィ の設定でフォントを指定すればCSS変数にフォントが設定されるので、正しく作られているブロックテーマであれば特にCSSを書かなくてもフォントが反映されます。

Webフォントにも対応しています。

Typography

ちなみにデフォルトテーマ「Twenty Twenty-Four」では、Cardo、Inter という2つのGoogleフォントが使えるようになっています。

しかしこの仕組みは、実は多くの日本語Webフォントにおいてはあまり・・・いや、全然役に立ちません。

なぜか？　その理由をご説明します。

こちらがTwenty Twenty-Fourのtheme.jsonのフォント指定部分です。

"fontFamilies": [
  {
    "fontFace": [
      {
        "fontFamily": "Inter",
        "fontStretch": "normal",
        "fontStyle": "normal",
        "fontWeight": "300 900",
        "src": [
          "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2"
        ]
      }
    ],
    "fontFamily": "\"Inter\", sans-serif",
    "name": "Inter",
    "slug": "body"
  },

Webフォントを指定する際は、src にフォントファイルのサーバー上のパスを指定します。
ここで src に外部サーバーのURLを指定しても読み込んでくれません。
Webフォントとして使用できるのは、自身のサーバーにアップロード（セルフホスティング）したフォントファイルだけなのです。

外部サーバーのフォントが利用できない理由は、WebフォントはEU一般データ保護規則（GDPR: General Data Protection Regulation）に抵触するリスクがあるとされているからです。
このため、今後も外部サーバーのフォントが利用できるようにはならないと思われます。

WordPress.org Strongly Urges Theme Authors to Switch to Locally Hosted Webfonts

日本語Webフォントを外部サーバーから読み込む理由はファイルが重いからじゃない

今のところ、明らかに日本国内からのアクセスのみを目的としたウェブサイトは、GDPRの対象にはなっていません。

そこで、Webフォントを外部サーバーから読み込むようにカスタマイズを行います。
Google Fonts についてはこちらの記事を参考にすれば可能です。

ブロックテーマに Google Web Fonts をリンクで追加する

上に示したベクトルさんの記事ではリンクで追加したい理由として「フォントファイルが重い」ことが挙げられています。
しかし、そんなことよりもっと基本的な問題があります。

よく使われている日本語Webフォントサービス（Adobe Fonts、FONTPLUS、TypeSquareなど）は、通常のプランでは「自身のサーバーにアップロードして使用する（セルフホスティング）ことが認められていない」のです。

一部のサービスにはセルフホスティングプランもありますが、「お問い合わせください」となっていますから、簡単に手が出る価格ではないことが想像できます。

ブロックテーマで日本語Webフォントを使う方法

では Google Fonts 以外はWebフォントとして使えないのかというと全くそんなことはありません。

従来通り functions.php（または自作プラグイン）で日本語Webフォントを埋め込むスクリプトを読み込んで、theme.json にローカルフォントと同じように font-family を記述するだけで使えます。

例）Adobe Fonts を使う

例として、このサイトで Adobe Fonts を使用できるようにする設定はこちらです。

先に Adobe Fonts にログインしてプロジェクトを作成しておき、プロジェクト個別の埋め込みコードをダウンロードしておいてください。

• adobefonts.js
  Adobe Fonts からダウンロードした埋め込みコードをテーマディレクトリの適当な位置にアップロードする

• functions.php
  フロント用、エディター用、ブロック用それぞれに、上記の埋め込みコードを読み込む

function add_webfonts() {
  wp_enqueue_script( 'adobefonts', get_theme_file_uri() . '/assets/js/adobefonts.js', array(), '1.0', false );
}
add_action( 'wp_enqueue_scripts', 'add_webfonts' ); // フロント用
add_action( 'admin_enqueue_scripts', 'add_webfonts' ); // 管理画面用
add_action( 'enqueue_block_editor_assets', 'add_webfonts' ); // ブロックエディタ用

• theme.json
  ローカルフォントと同じ形式でフォントを指定する
  （フォールバック用に汎用フォントファミリー（serif, sans-serif）を指定しておく）

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "ryo-gothic-plusn, sans-serif",
          "name": "りょうゴシック",
          "slug": "ryo-gothic"
        },
        {
          "fontFamily": "dnp-shuei-mgothic-std, sans-serif",
          "name": "DNP秀英丸ゴシック",
          "slug": "dnp-shuei-mgothic"
        },
        {
          "fontFamily": "fot-udkakugo-small-pr6n, sans-serif",
          "name": "FOT UD 角ゴスモール",
          "slug": "fot-udkakugo-small"
        },
      ],

これでブロックテーマで日本語Webフォントが指定できるようになります。

---

FONTPLUS、TypeSquare でも、ほぼ同様の手順で使えるようになります。

フォントライブラリにも過度な期待はできない？

WordPress 6.5 ではフォントライブラリが導入されます。

公式のドキュメントやWordPressに詳しい方のブログ記事、Xのポストなどで「Google Fontsが使える」と書いてあるため、「日本語Webフォントが使えるようになる！」と期待されているがいらっしゃるようですが、残念ながらこちらも対応できるのは「Google Fonts の日本語フォントだけ」です。

ただし、上記の手順で functions.php で埋め込みコードを読み込めばフォントライブラリで使えるようになると思われます。
導入は難しくありませんので、ブロックテーマで便利に日本語Webフォントを使っていきましょう！