Use Google Fonts Locally

Since the introduction of CSS3, web fonts have become ubiquitous. Instead of depending on a handful of standard system fonts that are loaded on a user’s computer, as a web designer or developer, you can choose from thousands of fonts that are hosted on remote servers and loaded into a user’s web browser. Google is one of the leading providers of web fonts. They have hundreds of free fonts available for your use through https://www.google.com/fonts. Best of all, they are all open source. Here's what Google says:

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially—in print, on your computer, or in your websites.

How Web Fonts Work

The Advantages

Web fonts offer both advantages and disadvantages for your website. Web fonts are downloaded to the user's browser while rendering the webpage and are then applied to the text. A big advantage of web fonts is that companies can use fonts that integrate with their brand image to achieve a consistent look and feel across all media. Web fonts can also introduce "personality" to your website, especially in headlines and subheads. The font displays on your website even when viewed on smartphones or tablets. Another modern benefit of web fonts is that you can eliminate jpg image headlines as was necessary in old-school development. With web fonts, all words on a page are 100% searchable and index-able. You no longer need ALT tags for search engines to know what your text says. This makes your code cleaner and more manageable.

Some Disadvantages

The main disadvantage of using web fonts is slow or inconsistent performance. They may slow your site's load time because you are making calls to a remote server that is outside of your span of control. They can also produce Cache Validator errors when tested with Google PageSpeed or Expire Header errors with Yahoo YSlow, again because of cross-site access. The images below are from a site tested through GTMetrix.com

Another disadvantage is that there is limited support for CSS3 in older browsers, which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font, it will fall back on the web safe fonts in the stack.

Overcoming the Disadvantages

Because of the Open Source nature of web fonts, they can be downloaded and served to the end user's browser directly from your website. There have been times where I have seen sites stall waiting for Google to respond. It may not be Google's fault either. It could be a DNS problem with your host or there could be a troublesome "hop" somewhere in the path required to reach Google. Whatever the case, serving Google fonts directly from you server will improve load times and avoid issues that come from downloading content from websites other than your own.

There are only a few steps required to serve Google fonts from your own site. In summary these steps include:

1. Retrieve the Google Fonts CSS
2. Download the Google Font(s)
3. Upload the font to your server
4. Add the font to your style sheet

The rest of this article will walk through the details of serving Google Fonts from your own local server.

Retrieve the Google Fonts CSS

1. Go to the Google Fonts website and add your chosen fonts to a collection.
   
   

   

2. Click the Use Button
   
   

   

3. Scroll down the page to the link to the Google Fonts CSS file.
   
   

   

4. Copy this link to a text editor
   
   

   

5. From the text editor, copy the content of the href tag and paste it into the browser address bar. Copy these @font-face styles to your text editor. We'll be editing these styles in the last step.
   
   

   

Download the Google Font(s)

The names of the Google Font files are in the @font-face styles you just copied to your text editor. For each font, copy the text that is in the URL() tag. For example, for the OpenSans-Light font in the above example, the name of the font file is:

fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2

Copy this to your browser address bar and the font will download. Unless you want to continue referring to the file as DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2, I suggest you rename this when you download it to something more human readable. I generally rename the font file one of the local reference names in the style. In this case, I would rename this file to opensans-light.woff2.

Upload the Font(s) to Your Server

Once you've downloaded all of the Google fonts to your computer, upload them through FTP to your child theme directory. I generally create a fonts directory in the child theme directory and copy the fonts to there.

Add the Font(s) to Your Style Sheet

Now it's time to edit the @font-face styles we copied to your text editor. Change the URL() tags to point to the files in your child theme fonts/directory. If you've done everything correctly, the new styles should like this:

Copy all of this @font-face text to your child theme's style sheet.

Make sure you remove any code from your functions.php that may be enqueuing Google fonts through php code.

Using Google Fonts on the Desktop

If you download the full Google Font package of your choice from the alternative source mentioned in the Author's Note above, it should include either a True Type (ttf) or Open Type (otf) font. You can then use your OS font installer to add the font to your desktop font collection.