I had found a particularly nice Google WebFont recently and wanted to use it in one of my projects. Unfortunately, the load time for these fonts via CSS can sometimes be a little much so I decided I would create the text with Gimp and save it as a compressed PNG instead. The problem, these applications can’t use the WebFonts in their current format: .woff.
Step 1: Get the font file.
The font I was interested in is called Lobster. You can search for whichever one you want. For the font you like, click the part that says “Quick Use”. You will then see a section that says “Add this code to your website” and it will contain something like:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
You want to take the URL listed there and copy/paste it into your browser (Everything between the single quotes for href). When it loads up, you will see a CSS file. Look for the line that says something like:
src: local('Lobster'), url(http://themes.googleusercontent.com/static/fonts/lobster/v5/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');
Now take the URL for the file ending in .woff and copy/paste that into your browser’s address bar. You will be prompted to download the file. Remember where you saved it!
Step 2: Convert the file.
There are a few tools out there for converting from .woff to .ttf and you are free to choose your favorite. Here is one. First upload the .woff file ( you do remember where you saved it right? ) and then when it says your file is ready, download the .ttf version.
Step 3: Install the font.
In Ubuntu, when I download the font I have the option of opening it with the font editor. When it opens, it shows me the font and then I click the button that says “Install Font”. It’s that easy. Depending on your operating system, there are various ways to install fonts. Here is a resource I found that will walk you through installation: http://www.searchfreefonts.com/articles/how-to-install-fonts.htm
Step 4: Enjoy using the font in your designs!