Adding new Google Fonts to Adobe Photoshop CC


By Web Designers Academy

install google fonts into photoshop

** This is part 2 in a series on using Google Fonts when designing a website (if you missed part 1, learn how to add Google Fonts to Dynamik Website Builder) **

Having too many different fonts in a website is like wearing the striped pants with the plaid shirt that’s crumpled on the floor near your bed.

Sure it might be easy to just slap together, but it just doesn’t really look good when you’re done.

Consistency is key when creating a website for your clients and it’s no different when using fonts.

Sure Google Fonts are great for page titles, heading styles and nav menu entries… but what happens when you want to make a banner or button in Photoshop with that same Google Font?

Here’s how.

NOTE: This process is the same for any version of Photoshop, or any graphic design program actually.

STEP 1 – Download A Google Font

Once you’ve narrowed down the gazillion Google Fonts to the one perfect font you like, you should be on a screen that look like this:

Add Google Font to your Collection

See that blue button on the right hand side that says Add To Collection?

Click that.

The blue button should have now changed to a grey button that now says Remove From Collection, like this:

remove google font from your collection

Does your screen look like that?  Good!

At this point you could add more to your Google Fonts to your collection, but for this tutorial let’s stick to one.

Towards the top-right of your screen is a button with a down arrow on it, it look like this…

download google font to your computer

Click it.

When you do a message will popup that has some options

download google font as a zip file

You want to click on the .zip file in the first option… as you can imagine – this just means that we are going to download the Google Font to our computer.

The end result is that on my Desktop I now have this:

google font on your desktop

There are other options you could choose, but we’ll chitty-chat about those on another tutorial.

Where did the file go?

Another important point is to make sure that you know where your computer saves files when you download something from the internet.

By default, most browsers will save the file to your Downloads or My Downloads folder.

I have mine set to save to my Desktop (that way I have to deal with them immediately and I don’t let downloaded files build up)

STEP 2 – Install On Your Computer

Once the file has been downloaded to your computer it now needs to be installed.  One thing I should mention is that we use Macs and the process we are going to explain is a bit different for Windows users (here is a rather lame tutorial from Microsoft).

Since you don’t install a .zip file as a font, we need to extract that .zip file.  On a Mac, you just double click it and you’ll be left with a folder, like this:

extracting a google font zip file

When you open that folder you’ll see a bunch of fonts (the .ttf files) and a text file with a bunch of legal stuff that no one ever reads (the .txt. file).  It should look like this:

extracted google font folder

Does your screen look like that?

Now select all those .ttf files with your mouse, right click it and choose  Open With > Font Book

open google font in font book for mac

When you do that, a popup will appear that includes a sample of the font you are going to install and a Install Font button, click that.

install google font in font book

When you click that, your font will be installed in your Font Book and we are one step closer to using that Google Font in Photoshop.

google font has been installed

Click to enlarge

STEP 3 – Use In Photoshop

WOW, we’ve come far!  But it’s ready!

Open up a file in Photoshop, get out the text tool and choose your new font

use google font in photoshop

Stay consistent with your fonts, make something gorgeous and smile.

Your friends,
Amy & Ian

PS: I know you are probably excited about using Google Fonts in Photoshop, butt please watch out for kids doing your i-can-use-google-fonts-in-photoshop celebration dance