How to Change Fonts in WordPress [The Easy Way]

Looking to change the font used on your WordPress site?

With the right tools, switching your site’s font or adding multiple new fonts is easy. Follow along with this quick tutorial, and you’ll have a new font displaying on your site in the next few minutes.

How to Use Easy Google Fonts

The best way to change the font on your site is with the Easy Google Fonts plugin.

Easy Google Fonts plugin

This plugin gives you access to hundreds of different fonts to use on your site. Before we move on with the plugin, lets take just a moment to cover what Google Fonts is.

What is Google Fonts?

Google Fonts provides access to hundreds of fonts that are free to use on any website. For any web developer looking to add a font to their site, Google Fonts makes it easy.

If you don’t know the ins-and-outs of building websites, that’s where the Easy Google Fonts plugin comes in. It handles the technical parts for you, so all you have to do is select which fonts you like.

Got it? Great, let’s get those fonts added!

Create your font control

When you activate the plugin, you’ll find a new Google Fonts menu item added under Settings. On that page you’ll find the following options:

the Easy Google Fonts settings menu

You’ll later assign fonts to your “font control” so you can have multiple font controls with different fonts and settings. For now, all you need to do is name your font control.

renaming the font control

Add a CSS selector

Below the control name, there’s a box where you can define the CSS selectors you want to use. If you don’t know what a CSS selector is that’s not a problem.

There are three CSS selectors added by default. Click on the “x” on each to remove them. Once removed, type in an asterisk (*) and press enter. The CSS Selectors setting should now look like this:

screenshot of the CSS selectors updated

The asterisk is a CSS selector that targets every HTML element on the site. In other words, you’ve just told Easy Google Fonts to use your new font for all text on the site.

Force Styles Override

I recommend checking the “Force Styles Override” box as well. This will ensure that the font you choose overrides the fonts used in the theme. There are no drawbacks to using this option, so you may as well check it save you a minute if the fonts don’t override without it.

Choose your new font

Now that Easy Google Fonts knows what parts of your site to affect, you can tell it what font to use.

Visit the Customizer to begin your font selection (Appearance > Customize). Once there, click on the new Typography section.

Screenshot of the new typography section added to Customizer
EGF works great with the Period theme.

This section will reveal two new sub-sections: Default Typography and Theme Typography. Click on the Theme Typography section.

You’ll now see the control you named earlier. Click the Edit Font button to reveal the customization options.

screenshot of the theme typography settings

There are quite a few options, but only two you need to edit.

Change the Script/Subset

Fonts have character sets designed to accommodate different languages. If your site is in English, select the first option, Latin.

Choosing “All Subsets” will make the font files much larger and increase your load times.

Choose the Font Family

This is where you finally get to choose your new font. As you select various fonts you’ll see your website updating instantly.

GIF of the font being changed

While this is certainly a great way to preview and change fonts, it’s not an efficient way to browse.

I recommend you visit Google Fonts which is well-designed for browsing and finding fonts. Once you find a few fonts you like, come back to your site and try them out with Easy Google Fonts

Adding & Customizing More Fonts

Hopefully, you’re loving your new font by now, but there is a lot more you can do with Easy Google Fonts.

Remember the Default Typography section from earlier? You can use that to customize your headings and paragraphs. Furthermore, you don’t have to stop at changing the font family, you can also change the font size and color too. And if you’re comfortable with some CSS selectors, you can customize the font on any single part of your site.

If you have any questions about changing fonts with WordPress or have a request for a new tutorial, please leave a comment below.

Related Posts