How to Change Your Font in WordPress – This Method Really Works!
Articles,  Blog

How to Change Your Font in WordPress – This Method Really Works!

This is Ben from WP Answered, and in this beginner WordPress tutorial, you’ll learn how to change your font in WordPress. You’ll start by installing the Google Fonts Typography plugin, and then work your way through the new settings added to the Customizer. You’ll also pick up a few tips for selecting the best fonts for your website. Now let’s get started. When it comes to changing fonts, the best and easiest solution is to use Google Fonts. They have over 800 beautiful fonts to choose from and you can use all of them on your site for free. In order to integrate your site with Google Fonts, you’ll need a new plugin and the best plugin for the job is Google Fonts Typography. As you can tell from the reviews, this plugin is awesome and it’s incredibly easy to use. To install the plugin, log in to your WordPress dashboard, hover your cursor over the Plugins menu and click “Add New.” On the next page, use the search bar at the top right to search for “google fonts,” and the first one to show up should be the one you want. Click the Install Now button. Wait a moment for the installation to complete, and once it’s ready, click the blue Activate button. After the plugin is activated and the page reloads, hover your mouse over the Appearance menu and click the Customize link to open the Live Customizer. Inside you’ll see the new Google Fonts section, so open it up and inside you’ll see these four sections. The bulk of the work will be done in the Basic Settings, so let’s open that up now. The first option here called Base Typography is going to change the font across your entire site at once. When you click on the dropdown menu, you’ll see this System Fonts heading and some familiar fonts like Arial and Georgia. But if you scroll down just a bit more, you’ll find the Google Fonts heading and below it are 800 brand new fonts. I’ll select the Alegreya font and as you can see the font across my entire site just updated. If I’m happy with my new font, I can click the Publish button now and save my changes so all my visitors will see it. I know what you’re thinking now… the dropdown lists hundreds of fonts and you can’t preview them with the menu, so isn’t it going to take forever to find the right font? Well, the best workflow is to visit Google Fonts first and use the font evaluation tools they have there to select a font. If you’d like some font recommendations, stick to the trending fonts that show up on the homepage. Roboto was designed by Google and is used in all of their applications including Gmail, YouTube, and the Google Fonts site itself. Open Sans and Lato are great fonts too. Monsterrat is great for headings, especially using its bold weight, and I use the relatively new Poppins font for all of my branding for WP Answered. Once you’ve found the font you’d like to use, you can return to your site and search for it by name in the font dropdown. For instance, if I’d like to use the Poppins font, I can just type “p-o-p-p” and hit Enter to switch to it. Now if you’re a very astute viewer, you’ll notice that none of the headings on my site updated when I changed my font. Every WordPress theme is different, but it’s very common for themes to use a separate font for the headings and site title. That’s why this plugin has another option specifically for changing your site’s headings right here. I can click this dropdown, type out “p-o-p-p” once again and hit Enter and you’ll see all of the headings now use the Poppins font too. Next, if I click on a post and scroll through it, you’ll see all of the text has been updated to the new font except for at the bottom – this button right here. Just like with the headings, there is a Buttons & Inputs Typography section, and if I change this to Poppins as well, you’ll see the button’s font now updates right away. With these three font settings, you should be able to change the font across your entire website very quickly. If you want even more control of your fonts or you’re having trouble getting the fonts to change on your site, keep watching. You may have noticed that each font dropdown includes this blue button next to it and if you click it, you’ll see the options to change the font weight and style. The font weights you see available will change based on which font you’ve selected. As for the font style, all you would do with this option is switch from normal to italic. You should never use the oblique setting because obliques are computer generated version of italics rather than a hand-designed true italic version of the font. Obliques can be hard to read and are generally kind of ugly. If you select new fonts here and your site doesn’t update, the Google Fonts Typography plugin has a built-in fix. Click the back button, open up the Debugging section, and then check the box here to force apply the font styles. This should work for most themes if the Basic Settings don’t work right away. With that out of the way, let’s get a little more advanced with our font customization. If you click the back button again and open up the Advanced Settings, you’ll see these sections which allow you to change the font more precisely on your site. For instance, if I open up the Branding section, I can use this first option to change the font of the site title only. The site title is so prominent that this is a great opportunity to use a more eccentric handwritten font to give your site a stylish flourish. If you’d like some recommendations, visit Google Fonts, use the Categories section to uncheck all options besides “handwriting” and you’ll find some pretty stylish options this way. Out of the top fonts, Courgette and Satisfy are two that I often use in my designs. Now there’s just one more thing that you absolutely need to know before you go. With the Advanced Settings. It’s tempting to add a lot of new fonts to your site, but you need to know that each new font you add will slow your site down a little bit. Such is the cost of style. You should limit yourself to three fonts at the very most, but using just one or two is preferable. If Google can use just one font for all of their many applications and websites, then you can certainly make a gorgeous website with just one font too. Speaking of performance, the Google Fonts Typography plugin does include a Font Loading section which lets you choose which weights to load and that will help your site load quite a bit faster. This feature is only available in the Pro version and there’s a link to that in the description below if you’d like to check it out. That’s everything you need to know about changing fonts with WordPress, and if you enjoyed my tutorial, then make sure to subscribe so you can catch the next one too. If you have any questions, please post in the comments section below and thanks so much for watching.

One Comment

  • WP Answered

    Having problems? I do my best to provide comprehensive tutorials, but if something didn’t work for your site, leave a comment below so I can help out and make this a more complete resource for future viewers.

Leave a Reply

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