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.
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.
Update: my new video tutorial will walk you through the steps (it uses a different plugin than the one in this tutorial).
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:
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.
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:
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.
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.
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.
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.