2

I've added my own font to the theme that I'm working on with the help of the theme.json file like this:

"typography": {
        "customFontSize": true,
        "customLineHeight": true,
        "fontFamilies": [
            {
                "fontFamily": "'Mulish', sans-serif",
                "name": "Mulish",
                "slug": "mulish",
                "fontFace": [
                    {
                        "fontFamily": "Mulish",
                        "fontWeight": "400",
                        "fontStyle": "normal",
                        "fontStretch": "normal",
                        "src": [ "file:./assets/fonts/Mulish-VariableFont_wght.woff2" ]
                    }
                    
                ]
            }
        ]
    },

When editing a block which support typography settings the custom font is shown. But by default content is shown in the 'default' style which is plain 'serif'. When changing it to the custom font it shows the custom font in the editor.

I can't find a way to remove the 'default' font option and to show the content in the editor by default with the custom font.

When searching for a solution I found this article (https://www.paulchinmoy.com/change-gutenberg-editors-default-font/) but that feels like a hack. And only works when you use a single custom font.

Is there a way to remove the default setting and styling of content in the block editor? And only use the custom font(s) which are used in the theme.json file?

Improve this question

1 Answer 1

Reset to default
0

You haven't set the font in the block editor, instead you've added an additional font family option!

Instead use global styles instead to style the text:

{
  "styles": {
    "typography": {
      "fontFamily": "'Mulish', sans-serif"
    },
  }
}

Now the default will be Mulish, additionally setting fontFamilies to [] in the typography section will remove the font family picker

Improve this answer
6
  • Thanks, adding the global styles solved the issue. However when setting 'fontFamilies to [] the custom font isn't visible anymore in the editor.
    – NielsPilon
    Commented Feb 28, 2023 at 11:59
  • you will need to find alternative means of loading the font file, I'm not 100% sure how to do that, I use an editor stylesheet for my own projects but their are WIP APIs that aren't finalised in WP core upcoming
    – Tom J Nowell ♦
    Commented Feb 28, 2023 at 13:14
  • I know about the editor stylesheet option but it feels wrong to do it that way. Hopefully the API's are making it to WP core soon.
    – NielsPilon
    Commented Feb 28, 2023 at 14:04
  • 1
    note that it looks like the default is what you specify in the styles section, and if you specify a font family as you're meant to with theme.json it will still show the default font, even if selecting it results in your font being the current value. E.g. if you have a font named System and use "fontFamily": "var(--wp--preset--font-family--system-font)", in your styles section, both System and default show up, even though they are identical and the same in every way. You should raise this as a bug with WP core/gutenberg
    – Tom J Nowell ♦
    Commented Feb 28, 2023 at 15:19
  • 1
    noting I have raised github.com/WordPress/gutenberg/issues/48597, any information you can add to aid this would be helpful
    – Tom J Nowell ♦
    Commented Feb 28, 2023 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.