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!

 

5 thoughts on “How To Use Google WebFonts in Photoshop, Inkscape, and Gimp

  1. I’m a font newbie. I found your page http://jeremyharris.me/how-to-use-google-webfonts-in-photoshop-inkscape-and-gimp/ by search result, and I was struggling because google fonts are now woff2 which I can’t find any converter for …

    Then I asked a graphic designer, and she told me to just click the download button (looks like a down arrow) in the upper right corner of the google font page.
    https://www.google.com/fonts#UsePlace:use/Collection:Lato

    That gives you a zip file with ttf in it.

    I figured you should update your page. But thanks for trying to help people like me! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *