wordpressgoogle-webfonts

wordpress 6 theme.json custom fonts are not working


i follow the twenty twenty two theme, and added to my custom theme: i have in my assets/fonts folder, my woff2 font. and in my theme.json inside the setiings -> typography ->fontFamilies like so:

            "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"]
                    }
                ]
            }
        ]

but it doesn't work. when i go to the global styles and change the site fonts, nothing is changing.

what am i doing wrong?


Solution

  • I think you'll need to have a "name" for each font you're referencing. You may need to supply a source for the fonts that aren't web standard. My customizations seem to be working. Here's what I have:

    "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"
                    ]
                }
            ]
        } ],