How to use Google Fonts on your WordPress site without including Google Fonts

Google GDPR

Due to the recent implementation of GDPR and the restrictions it has on the use of Google Fonts in the EU we’ve added functionality to our themes that lets you disable Google Fonts entirely. You will find this setting under Appearance > Customize > Fonts > Settings

When you disable Google Fonts your font selection dropdowns will only display the 15 default browser fonts.

Default browser fonts dropdown

This means the font selection is not terribly exciting but just because you’re not including Google Fonts on your site doesn’t mean you can’t use a Google font on your site…

Use Any Font

The Use Any Font WordPress plugin will allow you to add custom fonts to your site. It supports TTF, OTF and WOFF file formats. Unfortunately the free version of the plugin only allows for the upload of one custom font but their premium licensing is donation-based with the lowest donation allowed being $10 so if you really want to use a custom font on your site and can’t use Google Fonts then it’s quite an affordable option. The other great thing about it is that it converts the fonts you add into the correct format they need to be in in order to be used on the web so you don’t have to worry about any of that stuff.

Once you have Use Any Font installed you’re ready to grab the Google font(s) you wish to use off the Google Fonts site.

How to Download a Google Font to your Computer

  1. Open the Google Fonts directory, pick your favorite fonts and add them to a collection.
  2. Once you have collected the desired fonts, click the “Families Selected” tab at the bottom right of the screen and you will see a download icon at the top right of the expanded flyout tab. This will give you a zip file containing all of the selected fonts in TTF format.

How to Import a Google Font to your Site

  1. Install the Use Any Font WordPress plugin.
  2. Click the “Use Any Font” menu item in the admin navigation.
  3. Acquire your API key. This needs to be done even if you’re using the free option.
  4. Once you’ve verified your API key click the “Add Fonts” button. Give the font a name, select the font file and click “Upload”.
  5. The custom font has now been imported to your site.

How to use an Imported Google Font on your Site

  1. Navigate to Appearance > Customize > Fonts > Site Title and set the Font Type to “Custom Font”.
  2. Enter the name of the custom font that you’ve imported to Use Any Font in the Font Name field.
  3. Your site title will now display in the custom font.

Leave a Reply

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