Support » Fixing WordPress » 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?

    • This topic was modified 3 weeks, 5 days ago by Steve Stern (sterndata).
    • This topic was modified 3 weeks, 5 days ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 10 replies - 1 through 10 (of 10 total)
  • 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.

    Thread Starter derrida

    (@derrida)

    @mrtom414 sorry, i had a long holiday.
    in the global styles inside the FSE, you can change the fonts for the entire site, which should override the theme.json selected styles.
    so there when i change the fonts, it doesn’t change, even thou in the dev tools it did changed the font family. but visually it doesn’t change.

    any idea why?

    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.

    juanladestiladera

    (@juanladestiladera)

    Hello,
    I lack on information on how to reffer the font faces to the source files (folder and extension) to have them locally
    Any hint?

    Thread Starter derrida

    (@derrida)

    hi @juanladestiladera
    according to teid example, you have the src, as in my example. but as i said it doesn’t word for me.

    juanladestiladera

    (@juanladestiladera)

    I can see the fonts in the editor (inside) but not on the page as visitor… 🙁

    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.

    Thread Starter derrida

    (@derrida)

    hi @matthiasreinholz
    first of all thank you so much it works with your example. i do have a question though: if i have several versions of a font family, like light, bold and regular.

    do i repeat this for every version? or is there another way? like in the src array, put the paths for each version?

    another question is unicodeRange: what does it do? and how did you built it?

    best regards

    @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).

    Thread Starter derrida

    (@derrida)

    @matthiasreinholz thank you for you answers and help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.