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

エディタとサイト全体にデフォルトのフォントを設定

CDN経由

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "'Zen Maru Gothic', serif;",
                    "name": "Zen Maru Gothic",
                    "slug": "zen-maru-gothic"
                }
            ]
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)"
        }
    }
}

JSON

<?php 

function custom_admin_init() {
    add_theme_support('editor-styles');
    add_editor_style('common.css');
};
add_action('admin_init', 'custom_admin_init');

PHP

/* 共通CSS(Editor, Front) */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

CSS

フォントファイル

フォントファイルの場合は、エディタとフロント側にCSSを読み込ませることは不要です。

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "'Zen Maru Gothic', serif;",
                    "name": "Zen Maru Gothic",
                    "slug": "zen-maru-gothic",
                    "fontFace": [
                        {
                            "fontFamily": "Zen Maru Gothic",
                            "fontWeight": "300",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": ["file:./fonts/ZenMaruGothic-Light.ttf"]
                        },
                        {
                            "fontFamily": "Zen Maru Gothic",
                            "fontWeight": "700",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": ["file:./fonts/ZenMaruGothic-Bold.ttf"]                            
                        }
                    ]
                }
            ]
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)"
        }
    }
}

JSON

フォントを複数セットしてブロックごとにフォントを指定

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "'Zen Maru Gothic', serif;",
                    "name": "Zen Maru Gothic",
                    "slug": "zen-maru-gothic"
                },
                {
                    "fontFamily": "'Rufina', serif",
                    "name": "Rufina",
                    "slug": "rufina"
                }
            ]
        }
    }
}

JSON

CDN経由の場合は、以下のPHPとCSSを追記する必要があります。

<?php 

function custom_admin_init() {
    add_theme_support('editor-styles');
    add_editor_style('common.css');
};
add_action('admin_init', 'custom_admin_init');

PHP

/* 共通CSS(Editor, Front) */
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

CSS