Theme Typography

How to Change Fonts in WordPress

change fonts in WordPress

‘How can I change the font in WordPress’ is one of the most common questions we get asked by our theme users. So I prepared this little tutorial to explain the method we recommend if you want to use a different font than the one your theme comes with.

We will use the free Google Fonts Typography plugin from the WordPress.org plugin directory, since it’s one of the easiest ways to change the default font of a theme.

In the future (from WordPress 5.9 onwards) changing or deactivating the theme’s default font will be managed via the Global Styles setting. We will update Aino accordingly, but at the moment Global Styles are still an experimental Gutenberg plugin feature, so let’s continue with the current method.

Deactivate the default font

Our Aino theme offers the option to deactivate the default theme first, so it’s not still loaded in the Browser. You will find this setting in the Customizer under Theme/Typography.

Choose your new font

Now you can install and activate the Fonts plugin. The plugin’s font settings are in the Customizer. Here you need to choose your preferred Google font.

Changing the default font to the Google font ‘Manrope’.

It’s important that you apply the font settings to all types of fonts, so that you don’t accidentally mix multiple fonts on your website.

Common font pairing methods

It’s important that you develop a certain font pairing strategy, in order to improve readability on your website. I recommend to clearly distinguish between heading and paragraph font styles.

Often two different fonts are used for headings and paragraphs, but this is not the only option. You can also use a bold font weight for headings and use only one font on your entire website.

If you are looking for font pairing inspirations don’t miss to browse the Typewolf website. You can find beautiful examples of font pairings there.

Best Practices

In most cases I wouldn’t recommend to use more than two different fonts on one website. It slows down your site speed since all used fonts will be loaded into the browser.

A clear visual font hierarchy also helps to structure your content and makes it easier for your website visitors to find the most important content on your website.

Important Headings should be easily scannable for the eye. Choosing a bigger font and/or a bolder font weight for headings makes sense. But of course not all headings need to be as big and bold as possible. It’s more about creating contrast between headings and paragraphs, so both content types can be easily distinguished.

Premium or locally hosted fonts

If you don’t want to use a plugin or if you want to host your (Google) font locally, you will need to follow different steps and I’m working a separate blog post to explain how to host your fonts locally. In case you still want to use a Google font but you want to host your font locally you can use the free OMGF WordPress plugin. An alternative especially for Adobe Creative Suit owners are Adobe fonts. You can install and activate premium fonts with the help of the Custom Adobe Fonts plugin.

Your feedback

What is your preferred method when it comes to fonts in WordPress? Do you have any questions or further recommendations? Please write me a comment below, I would love to hear from you.

Join the conversation

  1. I dared and did it: Locally hosted fonts. But I’m not sure what font weights I need for Aino. Can you please list them briefly?
    Many Thanks.

    1. Hi Jonas, I’m so sorry that I missed to reply to you earlier. So cool that you chose to host your fonts locally. Hope it all went well. Regarding font weights, by default it’s all “normal” (400), but you can choose to use bold (700) for headings via the Customizer setting (see Theme Options/Typography). Alternatively if you load your font in e.g. semibold you can overwrite the default font weight styles with custom CSS. Let me know if you need help with that. It might be a good follow up blog post anyways.

      Also in the future, as soon as we will support the new “Global Styles” feature in WordPress there will be easier options to change fonts and font styles. I will write about this new option as soon as it will be available.

      Best Regards,
      Ellen

Leave a Reply

Your email address will not be published. Required fields are marked *