‘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.
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.
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.
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.