wordpress 6 theme.json custom fonts are not working

Question

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?

Answer 1

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