How to set default font in block theme?

  • Resolved VIPStephan

    (@10010110)


    1 year, 3 months ago

    I’m trying to create a new block theme with very limited options for styling, i. e. I want to use a custom, self-hosted font that should be predetermined and it should not be possible to change it. How do I set that font as default? All sources I found only talk about how to add custom fonts (to the list of selectable fonts in the full site editor) but not how to specify one font only. I know how to remove the font select element but not how to set the default font.

    Also, if I look into the 2023 theme, if I select the “default font” option there, it selects the System Font option automatically. How is that achieved? I’m not even able to achieve that.

    • This topic was modified 1 year, 3 months ago by VIPStephan.
Viewing 2 replies - 1 through 2 (of 2 total)

  • You might try this with a child-theme and adding CSS in there that overrides all font-related CSS from the default theme.

    Thread Starter VIPStephan

    (@10010110)

    I found it: it’s the settings.styles.elements.typography property in the theme.json file. It’s a little overcomplicated, in my opinion, but how to add fonts is explained at https://fullsiteediting.com/lessons/theme-json-typography-options/ – although it misses the point where you specify the global default font. This is done in

    "settings": {
  "styles": {
    "typography": {
     "fontFamily": "var(--wp--preset--font-family--example)"
    }
  }
}

    That CSS variable, where it says “example”, is what one previously defines as slug in settings.typography.fontFamilies.

    It’s kind of overcomplicated, in my opinion, but that’s where we are. :-/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to set default font in block theme?’ is closed to new replies.