how to use fonts in photoshop

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.

Thankfully, it's not hard to add Google Fonts to Adobe Photoshop.

This tutorial will show you how to add Google Fonts to Adobe Photoshop. 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?

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

This content is from our web designer training program. This is part two 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).

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:

How to add Google Fonts to Adobe Photoshop

See that button on the right hand side that says Download Family?

Click that.

No, it will not digitize your Mom and Dad and package them into a .zip file. Don't worry.

As you can imagine, this will begin the download of the Google Font file (it's a .zip file) to our computer. The end result is that on my Desktop I now have this:

Download and add Google Fonts to Adobe Photoshop

Hey! Where did the file go?

Another important point is to make sure that you know where your computer/browser 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 The Font Your Computer (so you can add Google Fonts to Adobe Photoshop)

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 so you can add Google Fonts to Adobe Photoshop

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), it should kinda look like this:

Extracted google font folder on your computer

Does your screen look like that?

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

Use "Open With" to add Google Fonts to Adobe Photoshop

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 so you can use it in Photoshop

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.

Your google font has been installed on your computer — Click to enlarge

STEP 3 – Use In Photoshop

WOW, we've come far! Almost there!

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

See that Google Font in your Adobe Photoshop

Stay consistent with your fonts, make something gorgeous and smile! You just learned how to add Google Fonts to Adobe Photoshop!

If you thought that was cool… you haven't seen anything yet! Learn about our web designer training program and unlock the ability to make money while traveling around the world.

Your friends,
Amy & Ian