** 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?
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:
See that blue button on the right hand side that says Add To Collection?
The blue button should have now changed to a grey button that now says Remove From Collection, like this:
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…
When you do a message will popup that has some options
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:
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:
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:
Does your screen look like that?
Now select all those .ttf files with your mouse, right click it and choose Open With > Font Book
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.
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.
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
Stay consistent with your fonts, make something gorgeous and smile.
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
All Blog Posts
Copy & Paste FAQ
Learn Gravity Forms Fast
Managing Your Server
Web Design Business
Web Design Inspiration
Web Design Tutorials