Last Updated: February 25, 2016
· joahg

Download Google Fonts for Faster Load Times

Anyone who has used Google Fonts knows that using the service can greatly add to the load time of your project. But, by downloading the font to have in your project's files, it can speed that back up for you.

To get started, start making a collection on Google Fonts. Then once you have obtained the code to “add [it] to your website” (Step #3 in the UsePlace), go to the url contained in the href attribute of the <link> tag.

Once there, simply copy and paste the url from the src of the font you’d like to download into the url bar of your browser. That should initiate the download the font in the form of a .woff file.

Then, simply add that .woff file to your project, and add the following code to your stylesheet:

@font-face {
  font-family: ‘Font Family Name';
  src: url(/format/to/fontfile.woff) format('woff');

Then you can use the font without the load times added by Google Fonts!

Say Thanks

3 Responses
Add your response

0 mv6vd4fgmdzlouhemnlldsca27fxy4me2n 5duno1e1z ymhgp99brhrg3bv00zk7nxx6p6jaqh1

A better approach to this is to utilize the WebFontConfig library to load the font in the background asynchronously while your page either hides the text (not recommended really) or uses a substitute font of similar typeface characteristics. See http://www.paulirish.com/2010/details-on-the-new-google-webfont-api/ for more specifics. Besides...fonts are big. Who wants all that bandwidth usage on their own servers? :P

over 1 year ago ·

true, why would you load fonts on ur server, while it might have been already cached in users browser throgh google cdn using web based font.

over 1 year ago ·
6c4b91c7e84c7f7915ecfa9468ac2362 normal

How would downloading the font file from your server be faster than Google's CDN? Google also takes care of the cross-browser fonts, unlike your single .woff file.

over 1 year ago ·