目次

• Google フォントをダウンロード
• プラグイン作成
  • プラグインのディレクトリ構成
  • サンプルコード
  • コードを少し解説

Google フォントをダウンロード

Google Fonts のページから、フォントファイル一式をダウンロードしてください。

今回はサンプルとして「Zen Maru Gothic」をダウンロードします。

プラグイン作成

次に、フォントを適用するプラグインを作りましょう。

以下のディレクトリ構成を参考にして、プラグインフォルダ内に先ほどダウンロードしたフォントファイル一式を入れてください。

プラグインのディレクトリ構成

サンプルコード

次に index.php に以下のコードを書きます。

// theme.json にフォントを追加
if ( ! function_exists( 'nishiki_pro_add_font_families' ) ) {
    function nishiki_pro_add_font_families( $theme_json ) {
        // フォントファイルまでのディレクトリを指定
        $font_directory = plugin_dir_url( __FILE__ ) . '/assets/fonts';

        $new_data = [
            'version'  => 3,
            'settings' => [
                'typography' => [
                    'fontFamilies'    => [
                        [
                            'fontFamily'  => 'Zen Maru Gothic',
                            'name' => 'Zen Maru Gothic',
                            'slug'  => 'zen-maru-gothic',
                            'fontFace'   => [
                                [
                                    'fontFamily' => 'Regular',
                                    'src'        => [ $font_directory . '/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf' ],
                                    'fontweight' => '400',
                                    'fontStyle'  => 'normal',
                                ]
                            ]
                        ],
                        [
                            'fontFamily'  => 'Zen Maru Gothic Light',
                            'name' => 'Zen Maru Gothic Light',
                            'slug'  => 'zen-maru-gothic-light',
                            'fontFace'   => [
                                [
                                    'fontFamily' => 'Light',
                                    'src'        => [ $font_directory . '/Zen_Maru_Gothic/ZenMaruGothic-Light.ttf' ],
                                    'fontweight' => '300',
                                    'fontStyle'  => 'normal',
                                ]
                            ]
                        ],
                    ],
                ],
            ],
        ];

        return $theme_json->update_with( $new_data );
    }

    add_filter( 'wp_theme_json_data_theme', 'nishiki_pro_add_font_families' );
}

コードを少し解説

ブロックエディターでタイポグラフィーの選択肢を追加するため theme.json にフォントファミリーの設定を追加している、というコードです。さらに増やしたい場合は配列にデータを追加してあげれば OK です。

正しくコードが動いていれば、下の画像のようにタイポグラフィーの「フォント」の選択肢を増やせます。