Improve performance by serving Google Fonts locally

Yesterday I encountered an unexpected problem. I was using the “Crimson Text” Google Web Font on a project, and the font did render. So I tried “Buenard” and had the same luck. The customary Stack Overflow search led to the conclusion that not all fonts work consistently across platforms. The best way is to download the Google font, run it through Font Squirrel, and serve the file locally. Along the way, it makes it easy to install the fonts on your computer so you can use them in your favorite Adobe products. This post shows you how to do that.

Problem: You want to use Google Fonts in your design, so how do you get them into PhotoShop?
Solution: Download the TTF files and install the ones you want.

Problem: You want to use Google Fonts on a site, but the font itself doesn’t show up in a browser?
Problem: You want to use Google Fonts but you want to serve them locally?
Solution: Download the TTF files and use FontSquirrel to convert them to a usable form.

Step 1: Download the Google Fonts TTF Files

Google makes all the TTF files for its fonts fairly accessible. I recommend that you go to the GitHub project “Google Font Directory” and download the zip file or the tarball, and select the fonts you want. The page also has instructions for updating the fonts.

Step 2: Convert the TTF file into web font formats.

Go to the Font Squirrel Web Font Generator. Upload the TTF file for your font. You will get back a zip file that has a folder with several files in it.

• Open the downloaded folder.
• Look for the files ending with .eot, .svg, .ttf, and .woff. Rename them to be just the name of your font, e.g. buenard.woff.
• OPTIONAL: Some people say that Google’s .woff is better than the one generated by Font Squirrel. You can grab that .woff file from Google by opening the CSS file they want you to link to, then opening the font file linked to by that CSS, and doing a “save page as” to overwrite the FontSquirrel .woff file.
• Move the fonts into a public/fonts folder. If it doesn’t exist, create it and add it to source control.
• Create or open a partial called _fonts.scss in your project, and make sure it’s imported into your main scss file.
• Add the following rules to _fonts.scss:

   @font-face {
     font-family: 'FontName';
     src:url('/fonts/icomoon/FontName.eot');
     src:url('/fonts/icommon/FontName.eot?#iefix') format('embedded-opentype'),
     url('/fonts/icomoon/FontName.woff') format('woff'),
     url('/fonts/icomoon/FontName.ttf') format('truetype'),
     url('/fonts/icomoon/FontName.svg#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }
  

• Use the fonts as you would any other font.