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'] = '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 Our font

Starting in GeneratePress 3.1, you can now add the local font in the customizer by inputting the font-family name without toggling on the Google Font option.

Show local fonts in WP block editor

WP block editor doesn’t load the @font-face CSS, so the local fonts will NOT show in the block editor. However, you can force WP block editor to load the CSS.

• If you added your fonts @font-face CSS in the Customizer > Additional CSS then add this snippet:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

• If you added your fonts @font-face CSS in your child theme’s style.css file then add this snippet:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );