*

Download Google Webfonts as TTF

Google Webfonts is an awesome service – it’s free, it has some great fonts (though there are only a few fonts available) and the implementation is super easy. They also offer a great preview of all fonts, which is pretty helpful to select the right one, but there’s no official way to download the font file to be able to test it in Photoshop or whatever. IMO it is really essential to design with the final typeface and not a placeholder, so here’s a short instruction how to get the TTF files in Safari:

If you don’t have the Web Inspector activated go to “Safari” > “Preferences” > “Advanced” and make sure “Show Develop menu in menu bar” is activated. Once you got this the “Develop” menu will appear next to the “Bookmarks” menu. 

1. Go to the Webfonts Directory and click on one of the fonts. 

2. Click on the “Specimen” tab or if available on “Variants”

3. Hit CMD+Alt+I or go to “Develop” > “Show Web Inspector”

4. Select the “Resources” tab and activate the “Fonts” filter. 

5. Select the font/variant you are looking for from the menu.

6. Switch to the “Headers” tab and copy the “Request URL”.

7. Open that URL in Safari. The download of the TTF file will start instantly. 

8. Go to your “Download” folder and install the font.

Disclaimer: This little tutorial is not meant to help you steal those fonts!!! Please stick to the Google Webfonts Terms of Service and just use the font files to test your design before you implement that stuff with the provided code in your website.