
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:
- Retrieve the Google Fonts CSS
- Download the Google Font(s)
- Upload the font to your server
- 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
-
Go to the Google Fonts website and add your chosen fonts to a collection.
-
Click the Use Button
-
Scroll down the page to the link to the Google Fonts CSS file.
-
Copy this link to a text editor
-
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.
Here is the screenshot of the new Google Fonts interface where you can see the download button (after chosing what fonts to use).
https://farm5.staticflickr.com/4756/26074411548_98733f578b_o.png
Unfortunately, the Google fonts download only provides you with True Type fonts (ttf). Webfonts are not provided.
thank you Victor.
Hi Victor,
Thank you for the helpful post.
I just want to point out that http://www.localfont.com/ may no longer be available. I used it for a couple of projects some time back but, lately, over the past few months, the url won’t resolve.
Thanks
Thanks for posting this. I’m hoping the more I do this, the easier it will get; but it’s worth it for localhost use.
i tried this method and nothing happened.
It probably has something to do with the fact that you are using autoptimize. The style sheet I see in your source code isn’t loading the fonts you are reference in your code. With a plugin like autoptimize, you have to rebuild its cache if you want changes included.
Thanks, Victor. This helped me a lot. I’m going to consider installing fonts on the sites instead of doing the “go to google” method.
thanks for this share, i want to try it.
Thank you for the article and for the link to localfont.com .
Thank your very much for these explanations. What to do with these “woff” files was not easy at first glance.
I was looking for this article so many days ago. Now got it here, I loved this writing and will check more here. Thanks!
Hi Victor!
Thanks for a very nice tutorials, but I think you forgot a notice that google get a different font files for each browser.
For example when you open http://fonts.googleapis.com/css?family=Open+Sans on Chrome google will get .woff2 font type, but if you open it on IE google will get .woff font type, and if you open it on safari google will get .ttf font type.
This is just a note for browsers compatibility.
Thanks again for the good tutorial.
Thanks for the tip Hazem. A site you may want to look into is http://www.localfont.com/. This site will download all Google font variations at one time and generate the CSS for you. It’s a great resource.
There is a download button to download the fonts as a zip.
Could you please be more specific and share where the button is located? The only download button I’ve ever seen allows you to download and install the Skyfont tool or click through to a Github repository for .ttf versions of all of the Google fonts. Thanks.
I tried this trick and got some really fab results.
Thank you Victor, this tutorial is very much appreciated.
You’re welcome!