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!
The Google Fonts settings in your theme can be found under Google Fonts in the WordPress customizer. Expanding this sections reveals the font options.
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:
- Open up the Google Fonts homepage.
- Browse for the font you want to use.
- 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).
- 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.
- 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
hrefattribute of the
linktag. For example, for the Snowburst One font the URL is http://fonts.googleapis.com/css?family=Snowburst+One as shown in the image below.
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.