How to load Google fonts locally

Loading fonts externally doesn't make sense. Let's put them on our server to improve page speed!

According to GTmetrix, 6 out of 20 requests on Unhype's homepage are external fonts from Google. Let's store these fonts locally.

This will make your page load times shorter, decrease the amount of DNS requests, leverage browser caching, and bring your YSlow and Google PageSpeed scores closer to 100.

I'm using GeneratePress Premium on all of my websites and, for convenience, I set my fonts using the Customizer.

Download the font files

Go to Google Fonts and find the fonts that your website is using. In the case of Unhype, it's Oswald and Open Sans.

Select all the fonts you need using the "plus" icon. Then click the download button in the upper-right corner of this window.

All the typefaces will be compressed inside a .zip file. Unpack it and choose the fonts that you're using.

I only need the regular version of Open Sans so that I will delete all the other files.

Convert your fonts to the WOFF format

Right now we got our fonts in the TTF format, but to ensure better compatibility across various browsers and devices, we should convert them to WOFF.

You can do this easily using Convertio. The site offers ten free conversions every day, which should be enough for regular use.

Upload the fonts to your server

You can do this using an FTP client or a plugin that I usually use, WP File Manager.

The fonts need to be uploaded to /uploads/fonts/ directory. Remember to upload only your WOFF files. If the folder doesn't exist, create it.

Add your fonts to your CSS stylesheet

Go to your Customizer/Additional CSS. You need to add a snippet of CSS code for each font uploaded like this:

@font-face {
    font-family: 'Open Sans';
    src: url('https://unhype.com/wp-content/uploads/fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('https://unhype.com/wp-content/uploads/fonts/Oswald-Variable-Weight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

You can now invoke these fonts using regular CSS.

Add your fonts to the Typography section in your Customizer

To be able to choose your fonts using GeneratePress Typography menu, you have to add a function to your child theme's function.php file.

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

    return $fonts;
} );

Easy enough! You can already choose your new fonts in the Typography section. They are located under the "System Fonts" tag.

Remove any Google Font requests that are left on your site

If you're using Generate Press, removing all Google Font requests is as easy as adding this code to your child theme's functions.php file:

add_action( 'wp_enqueue_scripts','tu_remove_google_fonts', 10 );
function tu_remove_google_fonts() {
    wp_dequeue_style( 'generate-fonts' );
}

Let's recheck the waterfall to see if our problem is fixed.

Well done! All fonts are hosted locally now.

How to do all of the above without coding

I wouldn't do this personally in this case, because I always try to minimize my plugin use, but if you're terrified to mess with code you can use these two plugins:

  1. OMGF | Host Google Fonts Locally
  2. Disable Google Fonts

I think they are pretty self-explanatory. Can't guarantee they work with every theme.

About the author

Living on the road for over ten years felt a bit unreal. Traveled to more than a hundred countries and met my wife along the way. In the end decided to settle down in a smaller city in Spain.

Please don't leave comments that are in any way hostile to me or my readers. They won't be approved. Constructive criticism is welcome, but I simply don't have the time to answer all of the trolls. This comment section is only welcome to friendly, positive-minded people who wish to add something meaningful to the conversation. If you don't like the language that I'm using or stories that I'm telling, you are free to choose one of the million other blogs where you can read the usual politically-correct fairy tales. You won't convert me. Hats off to those who get it!

Leave a Comment