MENU

【theme.json】フォントの設定

WordPress

この記事では、theme.jsonでフォントを設定する方法について解説しています。

ブロックごとにフォントを変更できるようにしたい人・エディタとフロントの表示を同期させたい人はぜひご参考ください。

目次

settings.typography.fontFamilies

フォントを設定するには、settings.typography.fontFamiliesの項目を指定する必要があります。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "'Oswald', sans-serif",
                    "name": "Oswald",
                    "slug": "oswald"
                },
                {
                    "fontFamily": "'Matemasie', sans-serif",
                    "name": "Matemasie",
                    "slug": "matemasie"
                }
            ]
        }
    }
}
theme.json
プロパティ解説
  • fontFamilies：配列の中にオブジェクトを作成し、その中でフォントの情報を定義します。

theme.jsonの設定ができたら、cssにフォント情報を読み込む記述をします。下記のコードは、theme.jsonで定義した「Oswald」「Matemasie」のGoogle FontのURLです。

@import url('https://fonts.googleapis.com/css2?family=Matemasie&family=Oswald:wght@200..700&display=swap');
common.css

上記cssをエディタとフロントの両方に読み込ませます。

define('THEME_VERSION', wp_get_theme()->get('Version'));
function custom_enqueue_scripts() {
    wp_enqueue_style('theme-css', get_template_directory_uri() . '/style.css', array(), THEME_VERSION, 'all');
};
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');


function wpdocs_theme_add_editor_styles() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );
functions.php

enqueue_block_assetsのフックを使って、エディタとフロントの両方に読み込ませる方法がありますがトップレベルのbodyが起点となってしまうため、個人的にadd_editor_style関数で読み込ませたほうが良いと思います。

生成されるcssは以下のとおりです。

:root {
  --wp--preset--font-family--oswald: 'Oswald', sans-serif;
  --wp--preset--font-family--matemasie: 'Matemasie', sans-serif;
}
CSS

設定したフォントが選択された場合、エディタとフロントには以下のクラスが付与されスタイルが適用されます。

/* Oswaldが選択された場合 */
.has-oswald-font-family {
    font-family: var(--wp--preset--font-family--oswald) !important;
}

/* Matemasieが選択された場合 */
.has-matemasie-font-family {
    font-family: var(--wp--preset--font-family--matemasie) !important;
}
CSS

サイト全体にフォントを適用

サイト全体にフォントを適用させたい場合は、styles.typography.fontFamilyに値を設定します。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--matemasie)"
        }
    }
}
theme.json

生成されるcssは以下のとおりです。

/* Oswaldが選択された場合 */
.has-oswald-font-family {
    font-family: var(--wp--preset--font-family--oswald) !important;
}

/* Matemasieが選択された場合 */
.has-matemasie-font-family {
    font-family: var(--wp--preset--font-family--matemasie) !important;
}
CSS

特定のブロックに異なるフォントを適用

見出しタグだけ異なるフォントを適用させたい場合は珍しくありません。その場合、見出しブロックの生成→フォントの変更を毎回しなくてはいけません。

そんなときは、styles.blocks.ブロック名.typography.fontFamilyに適用させたいフォントを設定することでブロック生成時にデフォルトでそのフォントを適用させることができます。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "styles": {
        "blocks": {
            "core/heading": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--matemasie)"
                }
            }
        }
    }
}
theme.json

生成されるcssは以下のとおりです。

:root :where(.wp-block-heading) {
    font-family: var(--wp--preset--font-family--matemasie);
}
CSS

要素ごとに異なるフォントを適用

「特定のブロックに異なるフォントを適用」の見出しでは、ブロックに異なるフォントを適用させましたが、要素ごとにフォントを適用させることも可能です。

下記のコードは、h2タグは「Matemasie」を、h3タグは「Oswald」を設定しています。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "styles": {
        "elements": {
            "h2": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--matemasie)"
                }
            },
            "h3": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--oswald)"
                }
            }
        }
    }
}
theme.json

生成されるcssは以下のとおりです。

h2 {
    font-family: var(--wp--preset--font-family--matemasie);
}

h3 {
    font-family: var(--wp--preset--font-family--oswald);
}
CSS
WordPress
よかったらシェアしてね！
  • URLをコピーしました！
目次