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

22 Comments

  1. Blackhawk Blackhawk

    This looks like a great tool to load on a development station while visually constructing posts and pages. And once you know what you want simply register the Google font on the live production site, within your custom plugin or theme package. Thanks for sharing.

    • Ben Sibley Ben Sibley

      Great idea, I hadn’t thought about using the plugin in that way.

  2. Rand Winburn Rand Winburn

    Ben, I am perfectly happen with the default TRACKS font style. However, in my last post I noticed there were two font styles within the post. Is there a ‘bug’?

    • Ben Sibley Ben Sibley

      This can happen when copying and pasting text into the editor. When pasting in text, click on the “Text” tab at the top-right of the editor, paste in the text, and then click on the “Visual” tab.

      When pasting text while in the Visual view, WordPress attempts to retain the style of the copied text which can cause changes in color and font.

  3. Rand Winburn Rand Winburn

    I thought that might have been the problem. Thanks so much, Ben!

    • Ben Sibley Ben Sibley

      You’re welcome 🙂

  4. Sandipan Sandipan

    Can a person with no css experience use this plugin.

    • Ben Sibley Ben Sibley

      Thanks for reading!

      You won’t need to use any CSS for this plugin to do basic font changes. You’ll only need to know how to find a CSS selector if you want to change the font of specific parts of the site. This guide on finding CSS selectors should help in that case.

  5. Sagar Chauhan Sagar Chauhan

    Thats Awesome for Me ! Compete themes are a very cool site. here, I got a lot of good informations. Thanks for Sharing This

  6. Mecca Mecca

    You saved me!! My brain says, “THANK YOU”!! LOL This was awesome instruction.

  7. Nat Brunner Nat Brunner

    When I do this I don’t see any fonts in the drop down? Is there a step I’m missing to actually install the google fonts or?

    • Ben Sibley Ben Sibley

      Hi Nat,

      It could be a conflict with another plugin. I would recommend temporarily deactivating all other plugins and then checking if this helps.

  8. Trending Visuals Trending Visuals

    Thank you bro, I was thought that It could be very difficult to change the font. But you Taught Like a Boss. 🙂

  9. Phil Phil

    Wow Ben! Thanks for this post. I am only relatively new to WordPress and was wracking my brain trying to figure out how to change the font. Being used to the very advertised drag and drop website builders like Wix and Weebly I had no idea if fonts could even be changed in WordPress themes so I did a google search and, luckily for me, your post came up.

    I am building a new website. I had already selected a font for labels on Averly and I wanted the same style to continue on the website. I followed your instructions to install the Easy Google Fonts plugin. Lo and behold, there was the font I needed!

    Thank you very much! I have now bookmarked your page for future reference and perusal.

    • Ben Sibley Ben Sibley

      Hey Phil,

      That’s awesome! I’m glad you enjoyed the post and welcome to WordPress 🙂

  10. Joshua Joshua

    Hey Ben,

    This is a great tool but I’m having trouble with my menu. I can’t change it’s font by using the default typography settings. I CAN change everything by using the theme typography settings but then my hamburger icon changes to a square outline.

    How can I change my menu font without losing my hamburger icon?

    • Ben Sibley Ben Sibley

      Is this in regards to the website in your comment? If so, you can use this CSS to keep the menu icon from breaking:

      .fa {
      font-family: “FontAwesome” !important;
      }

      A lot of themes (mine included!) use an icon font called Font Awesome. What’s happening is that the font used for the icon changes and then there isn’t a glyph in the new font for a hamburger menu icon. The above CSS forces all Font Awesome elements to always use the Font Awesome font.

  11. waqar waqar

    Copasetic NF
    this font is not available in this plugin how can i add it

  12. Lisa Lisa

    Thanks Ben! This was super helpful and I have successfully changed the font on my site. Pretty proud of myself 🙂

    Now I want to update the headings and quotes to different fonts. Any chance you could do a part two letting me know how to do that? Thanks so much for your helpful post.

    • Ben Sibley Ben Sibley

      Hey Lisa,

      Easy Google Fonts actually comes with this functionality. In the tutorial, I showed you how to change the font site-wide by using the Theme Typography section, but Easy Google Fonts also comes with a Default Typography section that includes controls for just the headings and paragraph elements (screenshot).

  13. Nancy Nancy

    Your amazing! So glad I found your site. I just changed my font on my whole site…just like that. Very easy to follow instructions. Definitely bookmarking this page. Thank you!

Post a comment

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