Use google webfonts in your designs

You may have come to know about google webfonts api, you may have also used a google webfont here or there in a project. However you may not have known that you can get access to a great majority of the google webfonts as TTF files that you can install to your OS and use for design mockups.

Using google webfonts in your mockups will help you decide on a font before it comes time to implement the HTML code. It will also allow you to create images that can use the same google webfont as you may use in your website.

The process is fairly straightforward however you will need to install some additional software and be ready to fire off some commands at the command line. I installted the fonts on my Windows 7 machine, however these instructions would work on a Mac as well with some minor tweaks.

First you will need to get some source control software called Mercurial. The google webfonts project uses mercurial to manage all the font files.

You can download Mercurial for your platform from http://mercurial.selenic.com/

I downloaded the simple version without tortoise-HG ( a graphical tool that will sit on top of Mercurial ). I grabbed the Mercurial 2.1.2 Inno setup installer for x64 windows ( 4th one on the list at the time at http://mercurial.selenic.com/downloads/ )

During installation make sure to check the box to have Mercurial added to the search path, this will enable you to call it directly from the command line without referencing the specific directory.

Now fire up a terminal ( hotkey windows key-r then type cmd to bring up a terminal ).

Run the command: hg clone https://code.google.com/p/googlefontdirectory/

In case you are wondering "HG" is the periodic table element symbol for Mercury.

Once that process finishes you will have a directory named googlefontdirectory. It could take a while, the fonts collectively take up a lot of space.

Enter that directory from the command line using the command: cd googlefontdirectory

Then run an explorer instance to open the directory in a graphical view by running the command: explorer .

( notice the period at the end of that command, include that in your command line to run )

In the search box type *.ttf and hit enter. You will see a ton of results, select all the files and then right click and choose "Install" to install all the fonts. If there is a dialog box that comes up asking if you'd like to overwrite, just choose no for all conflicts.

You now have all the google webfonts available installed to your system. You can now restart photoshop ( or your design program of choice ) and you will see all the fonts listed for use.

If you'd like to keep the Mercurial project folder around for the future, you will be able to get updates to the fonts without needing to redownload the entire directory again. However I cleared it off my system as the directory took up a lot of space. If you keep it around, just use the command: hg pull -u

That will update the folder to the latest versions, then do the above steps again with searching for ttf files and installing and you'll get newer fonts.