wordpress 6 theme.json 自定义字体不起作用

Question

我遵循二十二十二主题，并添加到我的自定义主题中：我的资产/字体文件夹中有我的 woff2 字体。在我的 theme.json 中的设置 -> 版式 ->fontFamilies 中，如下所示：

            "fontFamilies": [
            {
                "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
                "slug": "system-font",
                "name": "System Font"
            },
            {
                "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
                "slug": "helvetica-arial"
            },
            {
                "fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
                "slug": "geneva-verdana"
            },
            {
                "fontFamily": "Cambria, Georgia, serif",
                "slug": "cambria-georgia"
            },
            {
                "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
                "slug": "hoefler-times-new-roman"
            },
            {
                "fontFamily": "Rubik, Verdana, sans-serif",
                "slug": "rubik-verdana"
            },
            {
                "fontFamily": "Rubik-Italic, Verdana, sans-serif",
                "slug": "rubik-italic-verdana"
            },
            {
                "fontFamily": "\"Rubik Glitch\", cursive",
                "name": "Rubik Glitch",
                "slug": "rubik-glitch",
                "fontFace": [
                    {
                        "fontFamily": "Rubik Glitch, cursive",
                        "src": ["file:./assets/fonts/Rubik_Glitch/RubikGlitch-Regular.woff2"]
                    }
                ]
            }
        ]

但它不起作用。当我进入全局样式并更改网站字体时，没有任何变化。

我做错了什么？

Answer 1

我认为您需要为您引用的每种字体指定一个“名称”。您可能需要提供非网络标准字体的来源。我的定制似乎有效。这是我所拥有的：

"fontFamilies": [
    {
        "fontFamily": "Montserrat",
        "name": "Montserrat",
        "slug": "montserrat",
        "fontFace": [
            {
                "fontFamily": "Montserrat",
                "fontWeight": "100 200 300 400 500 600 700 800 900",
                "fontStyle": "normal",
                "src": [ "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" ]
            },
            {
                "fontFamily": "Montserrat",
                "fontWeight": "100 200 300 400 500 600 700 800 900",
                "fontStyle": "italic",
                "src": [ "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" ]
            }
        ]
    },
    {
        "fontFamily": "Better Together",
        "name": "Better Together",
        "slug": "better-together",
        "fontFace": [
            {
                "fontFamily": "Better Together",
                "src": [
                    "file:./assets/fonts/BetterTogether/BetterTogether.eot",
                    "file:./assets/fonts/BetterTogether/BetterTogether.svg",
                    "file:./assets/fonts/BetterTogether/BetterTogether.ttf",
                    "file:./assets/fonts/BetterTogether/BetterTogether.woff",
                    "file:./assets/fonts/BetterTogether/BetterTogether.woff2"
                ]
            }
        ]
    },
    {
        "fontFamily": "Buttercake",
        "name": "Buttercake",
        "slug": "buttercake",
        "fontFace": [
            {
                "fontFamily": "Buttercake",
                "src": [
                    "file:./assets/fonts/Buttercake/Buttercake.eot",
                    "file:./assets/fonts/Buttercake/Buttercake.svg",
                    "file:./assets/fonts/Buttercake/Buttercake.ttf",
                    "file:./assets/fonts/Buttercake/Buttercake.woff",
                    "file:./assets/fonts/Buttercake/Buttercake.woff2"
                ]
            }
        ]
    },
    {
        "fontFamily": "Winter Calligraphy",
        "name": "Winter Calligraphy",
        "slug": "winter-calligraphy",
        "fontFace": [
            {
                "fontFamily": "Winter Calligraphy",
                "src": [
                    "file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.eot",
                    "file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.svg",
                    "file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.ttf",
                    "file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.woff",
                    "file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.woff2"
                ]
            }
        ]
    } ],

Answer 2

在这里也遇到字体问题，所以尝试一下，是的，字体会自动加载到库中，但它们处于非活动状态。所以我没有在块编辑器属性中获取它们。我可以使用该库激活它们，但我需要在代码中完成此操作，以便用户不需要了解这一点。为了让最后一件作品也能正常工作，我还缺少什么？

字体出现在库中，但未激活