How To Use Google WebFonts in Photoshop, Inkscape, and Gimp

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:

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:

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!