wordpress 6 theme.json custom fonts are not working

Did you use them in the style section of theme.json. I think you have to apply them in the style section for the blocks you want. I think before when you add them in settings and they would show up in the block as a drop-down and you could apply that font family. But, It was removed for some reason. I think to use them now you need to add them in the style section.

It been a while since I was playing with it. I know originally if you added fonts at the global and block level you would get a drop down menu allowing you to choice a font family. There were a few tutorials which demonstrated it. I played with it but was only able to get it to work for work block. But, that was removed.

When you create a global in the settings it creates a variable you can use in the style section. I was never able to get it to work correctly at the global settings or block level settings. I was able to apply the fonts by styling them in the style secretion. But, I never was able to do it in the settings section. I seen a message from someone on the development team saying it had been removed because of problems.

This is how it’s working:

      "fontFamilies": [

        {
          "fontFamily": "\"Noto Sans\"",
          "slug": "noto-sans",
          "name": "Noto Sans",
          "fontFace": [
            {
              "fontFamily": "\"Noto Sans\"",
              "fontWeight": "400",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "fontDisplay": "swap",
              "unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
              "src": [
                "file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-regular.woff2",
                "file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-regular.woff"
              ]
            }
        ]
    }]

I have added a few more options to already demonstrate the full production use with separate smaller font files for different unicode ranges, font styles, and font weights. WordPress will automatically only load the required font files in the frontend if you specify those values correctly.

@derrida you could have one entry for the regular version with fontWeight set to 400 and the source files for this version. Then another entry for the bold version with fontWeight 700, etc.

Some fonts don’t require separate versions for regular and bold. However, many fonts look more crisp if you are using their dedicated bold version.
The advantage of separating the entries in the theme.json is to keep the load in the frontend low. WordPress will only enqueue the font files that it neeeds on any loaded page. If there is no bold text, it won’t load the bold font files.

The unicodeRange parameter is another way to keep loaded fonts small in size. Depending on your font, it may be compatible with different alphabets. Examples for charsets are latin, cyrillic, greek, or vietnamese. Most likely, you won’t need all of them all the time on every page of your website.
If you are not offering text in any other alphabet than latin (and your font file is already optimized in size), you may not need this setting.

Of course, you could bundle all unicode characters and font weights together into one big font file. However, this could make the difference between loading 20kb versus 200kb (or even much more).

doesn’t work from child theme,
still loading the wrong path (parent’s path)