One of the most important things you want to be able to do on your site is change your fonts. This is important because you don’t want to be stuck with the theme’s original fonts if they don’t match your style, and you want to be able to change things if you completely redesign your brand.
Because we know this, we make it really easy to change the 3 most important text types on your site: headings, body text, and special areas like buttons, input fields, etc. However, it’s not much good to you if you don’t actually know the right way to use this feature. So, today we’re showing you how you can use Google Fonts to change the fonts on your WordPress site.
[Tweet “Learn how to use Google Fonts on your WordPress site with this tutorial”]
Pick your fonts
Obviously the first thing you want to do is head on over to Google Fonts and pick the 1-2 fonts that you want to use on your site. This can be kind of overwhelming because as of writing this they have 822 font families available; however, it’s important to stick with no more than a few fonts on your site to keep things looking professional and pulled together.
A great place to start if you’re feeling overwhelmed is to use the options to the right to filter out options you know you won’t want. We like to do this when picking fonts for our themes because most of the time we know we want to use a sans serif typeface, so we can filter out all of the serif ones to make things go a little faster.
One thing we really love about Google Fonts is that they have built in suggestions for fonts that you can pair together. For example, if you really like Open Sans Condensed, you can see a list of the fonts below that would pair really well together. Definitely consider using this feature if you’re not familiar with design or what to look for when using two different fonts together.
Add the fonts to your collection
Once you’ve picked what fonts you want to use, you’ll simple use the red plus sign to add them to your collection. When you’re doing this, you’ll see that you can customize your option a bit more by choosing what weights and styles of the font you want to use.
It may seem naturally to get all of the weights and styles, but it’s important to know here that the more weight and style options you ask your site to load, the slower the load time will be for people visiting your site. For this reason, we recommend only choosing 1-2 options per font. If you’re not sure what to do here, a good rule of thumb for body text (aka the text in your blog posts) is to get the regular, italic, and bold options since you’ll likely be using all variations in your posts. Whereas for headings or buttons, you can get away with just one weight.
Install your fonts
After you’ve selected your weights and styles, we need to get the code to actually load these fonts on your site. To do this you’ll simply click Embed, which is right beside the button to Customize the weights and styles of your chosen fonts.
To install your fonts in the easiest way possible, you’ll use the Standard method and copy the entire code in the box that appears below it. Here’s what that might look like for you:
After you’ve copied that code, head over to your WordPress dashboard, and go to Genesis > Theme Settings. You can scroll to the bottom of the page, and look for the Header and Footer Scripts area. Once you’re there, you can paste the code you copied straight into the Header Scripts box and hit Save.
Changing the fonts on your site
Now that you’ve loaded the fonts on your site, it’s time to actually put them to work! There are a few ways you can do this, but we’ve made it incredibly easy for you to do. You’ll navigate to Appearance > Customize, and look for the Fonts section. After clicking on that, you’ll see an area, like below, where you can type in the names of the fonts you want to use. All you have to do is type in the names of the fonts that you want to use for the specific sections and then hit Save, and you’re good to go!
If things don’t look like they’re working
If you’ve followed all of the steps above and your font isn’t updating, go back to make sure you’ve placed the code in the right spot in your dashboard and hit Save. Also make sure you’re spelling the names of your chosen fonts correctly.
If things still aren’t working, make sure to clear your browser’s cache. This can sometimes keep you from seeing changes made on your site. You may even need to clear your hosting cache, depending on your host’s settings.
Something to keep in mind
Not all WordPress themes are built like ours. That means that while we make it really easy for our customers to change their fonts, this tutorial might not be the right one for you. If you don’t have a Customizer option to change your fonts, then definitely check out this plugin instead to use your fonts on your site.