Adding Local Fonts

Sometimes you may want to host a font locally, instead of using a service like Google Fonts. This article will take you through the steps to do this.

For the purpose of this article, we’ll be using Google Fonts. However, this process will work for any kind of font file you might have.

Downloading our font

So the first step is to download the font we want to use. For Google Fonts, this tool is incredibly useful.

At the top left, search for the font you want to download.

Once you click on your font, you’ll be taken to a page where you can choose your variants, and download the files.

When choosing variants, be sure to only check the ones you need. The more you check, the heavier your page will be.

The next step on the page is to copy our CSS, but we’re going to skip that for now, and head to step 4, which is downloading the files.

This will download a .zip file to your computer, which you can extract.

Uploading our font

Note: If you’re comfortable with uploading files to your server via FTP, you can skip this step and simply upload your font files to your child theme.

Now that we have our font files, we need to upload them to our server.

By default, the WordPress Media Library doesn’t allow us to upload font files. This is due to security concerns with some of these files.

However, we can temporarily allow these files to be uploaded by adding the below function to our website. Once we’re done, it’s best to remove this function.

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff']  = 'application/x-font-woff';
    $mimes['woff2'] = 'application/x-font-woff2';
    $mimes['ttf']   = 'application/x-font-ttf';
    $mimes['svg']   = 'image/svg+xml';
    $mimes['eot']   = 'application/vnd.ms-fontobject';

    return $mimes;
} );

Learn how to add PHP functions here.

Now we can upload our font files into the Media Library.

Now that our files are uploaded, let’s grab the File URL to one of them.

http://gp-test.local/wp-content/uploads/2019/02/open-sans-v15-latin-regular.woff2

Now, let’s remove the filename, and take note of the URL for the next step.

http://gp-test.local/wp-content/uploads/2019/02/

Using @font-face

Alright, we’re almost done! Now we need to reference our fonts in our CSS.

Let’s go back to our Google Fonts Helper website where we downloaded the font files, and head back up to step 3.

Under all of the CSS, you’ll see a field for the folder prefix. In there, we’re going to add the URL we took note of above.

Now above this field, copy all of the provided CSS, and add it to your website.

Learn how to add CSS here.

Take note of the font-family field in your CSS, we’re going to need this exact name below. You don’t have to keep what’s in there by default – you can change it to anything you want.

Adding it to the Customizer

So, our fonts are uploaded, and referenced in our CSS. We could now write our own CSS, and reference our new font family.

However, if you want to use our Typography controls in the Customizer, we need to add the font into our list of fonts.

In our CSS, we took note of our font-family name. In this case, it’s Open Sans.

We can now use a filter to add it to our Customizer list:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Open Sans';

return $fonts;
} );

Learn how to add PHP here.

To add multiple fonts, your function would look like this:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';
    $fonts[] = 'Parisienne';

    return $fonts;
} );

Using our font

We’re done! Now when you go into your Typography settings in the Customizer, you’ll find your font-family name within the System Fonts section of the dropdown.