Software

Desktop apps, eLearning and more.

Database

Database driven sites, applications, knowledge

Mobile

iPhone and Android get apps that travel

Web

Creating online businesses since 2003

Google Fonts

Published 10/07-2013

Google Fonts

Yesterday I encountered an unexpected problem. I was using the "Crimson Text" Google Web Font on a project, and the font did not show up on IE. So I tried "Buenard" and had the same luck. The customary Stack Overflow search led to the conclusion that not all fonts work in IE. 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 Internet Explorer?
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.

  1. Open the downloaded folder.
  2. 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.
  3. 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.
  4. Move the fonts into a public/fonts folder. If it doesn't exist, create it and add it to source control.
  5. Create or open a partial called _fonts.scss in your project, and make sure it's imported into your main scss file.
  6. 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;
    }
  7. Use the fonts as you would any other font.

Author

David Furber Application Developer
David Furber

Application Developer

comments powered by Disqus

Related Projects

Tell us your idea! ×