enabling local web fonts

Every now and then I come across a requirement where a client asks that their website be able to run with limited or no internet connection. This may be because it is being used as an intranet site, or that their internet access is restricted, or for some other reason.

As WordPress can run locally this isn’t a problem except for those instances where the site relies on external resources – such as fonts. As a result it is then necessary to include the font files as part of the WordPress theme and not have to rely on third-party providers like Google Fonts.

Google fonts

It is possible to go to Google Fonts and download the font files that you need. Navigate to Google Fonts and search for the font that you require. Select the weights you want and in the right-hand corner of the screen you will see a small arrow that will allow you to download the font to your computer:

Button to download Google Fonts
Button to download Google Fonts

It is interesting to note that Google Fonts pops up a warning saying that you do not need to download the font to use it on your webpages, which is true, as you can just link to their site, but we are trying to avoid doing that:

Google Fonts Download Warning
Google Fonts Download Warning

The problem with downloading your selected fonts from Google is that all you get are the web fonts. In order to enable local web fonts, you also need to provide the CSS so the browser knows how to use the specific font files. Different browsers use different font types and so you need to serve up all the information about each font in a proper CSS file. Unfortunately, Google Fonts doesn’t generate the CSS for you, but fortunately there is a service that does.

Google webfonts helper

Google Webfonts Helper uses the Google Fonts API to get both the font files and also generates the necessary CSS for everything to work.

So rather than download the fonts directly from the Google Fonts directory is it better to head over the the Google Webfonts Helper website and download them from there.

Once there you can search for the fonts you want and then select the style weights that you require and the CSS will be automatically generated for you.

You can then copy and paste the CSS and download the webfonts zip file:

Download CSS and fonts from Google Webfonts Helper
Download CSS and fonts from Google Webfonts Helper

One tip is that you may want to customize the folder prefix to point to where you are going to store the font files.

Finally …

The final step (if you are using WordPress) is to remember to enqueue the fonts in functions.php