Using Google Fonts on Your Site

Below you'll find the steps on how to use Google Fonts with your Coded Creative theme.

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.

Still need help? Contact Us Contact Us