• Hi,

    I’m testing Twenty Twenty-Two theme and I just can see three options in font family settings: Default, System font and Source Sans Pro.

    How can I add more fonts to this list? I would like to add more and assign a sans font to headers.

    Is this possible? I can’t find any way to do it.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • I *think* you have to add the extra font information in the theme.json file, by editing this section:

    “typography”: {
    “dropCap”: false,
    “fontFamilies”: [
    {
    “fontFamily”: “-apple-system,BlinkMacSystemFont,\”Segoe UI\”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,\”Helvetica Neue\”,sans-serif”,
    “name”: “System Font”,
    “slug”: “system-font”
    },
    {
    “fontFamily”: “\”Source Serif Pro\”, serif”,
    “name”: “Source Serif Pro”,
    “slug”: “source-serif-pro”
    }

    Hi there! If you’re comfortable editing theme files, then yes, in order to make more fonts available, you’ll need to add font families there to that area of Theme.json:

    https://developer.www.ads-software.com/block-editor/how-to-guides/themes/theme-json/#presets

    You’ll also need to use a separate function to enqueue the font files like you would in any other theme. Twenty Twenty-Two handles that here for its default font:

    https://themes.trac.www.ads-software.com/browser/twentytwentytwo/1.0/functions.php#L90

    Eventually, a fonts API should hopefully allow theme authors a way to handle this entirely from within theme.json.

    https://github.com/WordPress/gutenberg/issues/35591

    For users who want to add more fonts to their site and aren’t comfortable making these changes, I’d suggest looking to see if a plugin exists that does this for you.

    Thread Starter axsu

    (@axsu)

    Hi @timoelliott and @kjellr,

    Thank you very much for your answers, but I’m not comfortable editing code. ??

    I like the theme so I’m going to wait for a while, maybe they will add more fonts.

    I don’t understand why everyone says “Don’t install too many plugins” but the solution for many basic things is always “Install a plugin”. ??

    Hi,
    I too was looking for a solution to add more fonts without changing the code.

    I added this module that add google fonts to my site – and everything looks o.k. – but still in the header section it’s the wrong font.

    So I added this to my CSS via the Dashboard => Appearance => Customize => Additional CSS:

    * {font-family:”Courier New”, Courier, monospace}

    And I think now it’s working.

    I really hope that in next releases changing fonts will be added to the theme directly

    Regards,
    Ram

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to add more fonts?’ is closed to new replies.