Using Custom Google Fonts

Last updated by David Gwyer on February 20, 2017 13:55

This guide covers how to add Google Fonts to your WordPress site. At the time of writing there are over 700 unique Google Fonts available giving you a huge selection to choose from when customizing your site!

Google Fonts Homepage

The Google Fonts settings in your theme can be found under Google Fonts in the WordPress customizer. Expanding this sections reveals the font options.

  • Remember, you can load the customizer via Appearance > Customizer.

Google Fonts Customizer

There are two ways to select which Google Font you want to use. Firstly, there is the Choose Font drop down that allows you to select from a predefined list of Google Fonts. Secondly, if the font you want isn’t listed in the drop down then you can manually specify ANY available Google Font.

To do this you need to find the Google Font URL and paste it into the Use Alternative Google Web Font customizer text box as follows:

  1. Open up the Google Fonts homepage.
  2. Browse for the font you want to use.
  3. Click the Quick-use icon which is one of the icons directly to the left of the Add to Collection button (it looks like an arrow pointing to the right).

    Quick-use Button

  4. In section 1. of the Quick Use page select the styles you want to include with your font. Normally you can just leave the default selection, but certain fonts include support for italics, bold etc. which you can select manually if you wish.
  5. Now for the important bit! In section 3. of the Quick Use page you need to copy the font URL. This is the URL contained in the href attribute of the link tag. For example, for the Snowburst One font the URL is http://fonts.googleapis.com/css?family=Snowburst+One as shown in the image below.

    Google Font URL

    • It’s easier to click once inside the section 3. text box to select the whole link tag. Copy/paste into the Add to Collection text box in the customizer and delete everything apart from the link text inside the href attribute.

Now that you’ve selected the Google Font to use on your site you’ll want to apply it only to specific elements. This is done in the form of a CSS selector. If you’re not familiar with CSS selectors you can read up on them here.

By default the font is applied to the following elements: h1, h2, h3, h4, nav a. You can change this by updating the Font CSS Selector customizer text box.

Make sure to save your Google Font settings by clicking Save & Publish and exit the customizer.

First published May 12, 2015