When working on websites there are occasions when the designers give you a design with some crazy fonts.  These look awesome but designers usually just reference the Google Font api website.  This is great for them but can degrade the performance of your website.  We prefer to download the fonts and run them locally.  Because I don’t do this very often I actually had to try to figure it out again.  It took a half hour to figure out so I need to write it down for next time!

When you download a webfont from Google Fonts it only gives you the .tff file.  This is useful when running on my machine but not so useful when trying to embed it into a website.

To embed it first download the .tff file from Google.

Then go to fontsquirrel and generate all the files you need.  It will create all the different types as well as an awesome page that shows examples of the font in use.  It created: .eot, .svg, .ttf, .woff, .woff2 files.

Done.  Now you have all the files you need to properly embed a Google Font in your website.

Update (1/10/2017):  When we pulled in some new fonts and pushed it to our DEV testing system we found that the new fonts were throwing errors.  After a bit of testing I found that we needed to add the following lines to our web.config file.  Here is the SO question that described the fix.

<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />