How to self host Google fonts on your website

This article explains how you can easily host Google fonts on your own webserver, rather than having to download them from an external source.

The majority of Google fonts are available under the SIL OpenFont License, though some are distributed under the Apache license.

For a simple explanation of these licenses check this webpage out:

https://fontsarena.com/licenses-explained/

Why you might choose to self host Google fonts

Google provides two easy methods to use Google fonts on your website. You can either load them from Google via the HMTL head section of your web page, or via the stylesheet.  

In both these cases you are loading them from an external source, in this case two sources: one for the font files and one for the stylesheet. The more fonts (and font styles) you are using the more this can impact on the site's performance and load speed.

By self hosting the fonts you can ensure that the fonts are immediately available direct from your own web server.

For a more technical information of why this might be beneficial, check out this page:

https://www.corewebvitals.io/pagespeed/self-host-google-fonts

To do this all manually could be quite complicated and confusing, but fortunately there is a great website which totally facilitates the whole process. So once you have chosen the font(s) that you want to use on Google fonts, head over to the Google webfonts helper:

Basically you need the following to self host your fonts:

1. A stylesheet that specifies the source of the font files

2. The font files themselves

3. Access to the webserver

You also need to specify the source of the font stylesheet in your HTML head

1. Find for your font in the left column and click on it.

Select how many styles you want to use by font weight (400 is regular, anything above bolder or less lighter) and add italics option if needed - you'll need to specify font weights exactly in your CSS stylesheet when using them.

If you want to support older browsers you can choose Legacy or Historic Support. This will add more font formats to your styles.

Specify the folder path where you plan to store your fonts on the webserver if it's to be anywhere different to the default.

Click on the code to select it all and copy and paste this into your CSS file. I normally create a separate CSS stylesheet for the fonts. Don't forget to load it in your HTML head.

For example:

2. The Webfonts Helper also generates all the font files for you. Click the button to download a zip archive of the font files to your computer.

3. Extract the files and upload them via FTP to the webserver.

Provided everything is in the right place, you can now use them in your main CSS stylesheet.

For example: