How to Use Google Fonts for Web and Print

November 20, 2018

Google Fonts are a lifesaver for anyone trying to build a brand identity on a budget.

They can be embedded on your website or downloaded for local use on your computer when creating documents in Word, or Adobe Suite, or whatever your preferred document creator is. If you’re lucky with your website theme you’ll get a wide range of Google Fonts included, but if you want to have them for local use, or want a completely different font, this guide will help you out!

Being consistent with fonts throughout your branding is really more important than you’d think. I’m a huge stickler for staying within brand guidelines, but that also probably harks back to my more corporate background where consistency was essential. If you wanted to, you could probably get away with switching between body / paragraph fonts without too much drama, but shuffling around header fonts (especially if they’re particularly graphic or a cursive style) can reduce your brand recognition. Think of it this way - your collateral, whether it’s print or digital is going to be travelling far and wide as a representation of you and your brand, so you need to make sure it’s doing exactly that. So let’s get started.

What is Google Fonts?

Google fonts is a very extensive directory of free open source designer fonts that are beautiful and web friendly. Using Google fonts on your website can help your pages load faster as fonts are safely cached without compromising user security. This means that after you visit a website which uses the free Google font ‘Raleway’ for the body / paragraph text, your browser has cached that font and will use it again next time you visit me or when you visit another website that also uses ‘Raleway’.

Selecting fonts on Google Fonts

So when you visit Google fonts you can see there are different categories of fonts that you can filter by, including Sans Serif and Handwriting. I’m a huge fan of Sans Serif fonts, because I like how modern they are so I’m going to filter by those.

Click on the name of the font you’re interested in and it will tell you a bit about the font (which can help with styling decisions) and shows you the different styles that come with this font family (regular, italic, bold etc). You can even type in some test sentences to see how your brand name will look in your new font! Scrolling down, Google will show you a selection of other fonts that font is regularly paired with and shows you how they look together as headers and body. Once you’ve decided upon the fonts you want to use in your branding, you can click the plus symbol to select them.

You’ll notice that as fonts are selected, you’ll get an estimated load time for your website. The more fonts you choose, the slower your website will load so it’s best practice not to choose more than two fonts. This is sufficient for headers and body text, keeping in mind you can also style them by bold or italics etc if you want more variety.

Downloading Google Fonts for Local Use

To download these fonts for use in Adobe Suite or Microsoft Office, click on the down pointing arrow as circled above. This will download a .zip file of all the font styles included in the font family.

Installing Google Fonts for Windows Users

If you’re using Windows, follow these steps to install the fonts for local use.

Find the downloaded .zip folder in your Downloads folder
Right click and select “Extract All” and Extract
Open your folder of unzipped fonts, select all then right click and select “Install”
If you’re operating an older version of Windows, navigate to the “Fonts” folder by opening your C: drive, followed by the Windows folder
Copy and paste or drag the font files into the “Fonts” folder
Wait for the fonts to install, and you’re good to go

Installing Google Fonts for Mac Users

If you’re using a Mac, follow these steps to install the fonts for local use.

Find the downloaded .zip folder in your Downloads folder
Double click to open the folder, and then double click on a font then select Install font at the bottom of the preview
Or you can select all fonts, and copy and paste or drag them into the “Fonts” folder found under Library > Fonts

It’s important to remember that other people can only see the fonts installed on their computer, so if you use this font in an email for example, chances are they will see their computer system’s default font instead. When sending digital files to someone else as a PDF created from a Word document, use these steps to embed your fonts. If sending an InDesign file to your printer, you may need to package your files by going to File > Package, but they can give you instructions for how they prefer to receive files.

Using Google Fonts in your Website

When you’ve selected your fonts, you’ll see an embed code (circled in image above) which you need to copy and paste into the head tag of your website. If you’re on WordPress, I have instructions for how to do this here, or you can install this plugin for ease of use. This will ensure that in most cases, visitors to your site will cache your chosen fonts and see your website how you intend.

Now though, you need to specify these fonts in CSS. Most CMS will have a Custom CSS section where you can make minor adjustments to your theme. For WordPress users this can be found under Appearance > Customise (this post here will provide more details). Google Fonts gives you the CSS rules which will be font-family: followed by your font name.

For example, if I want my headings to all be in Roboto, this is the code you need:

h1, h2, h3, h4, h5, h6 {
font-family: ‘Roboto’, sans-serif;
}

You only need to include the headings you want to change, so you may not include all six. If you want your body text to be in ‘Pacifico’ which is a handwriting font, the code will be:

p {
font-family: ‘Pacifico’, cursive;
}

And it's that easy! Creating a consistent brand identity needn't be complicated, and Google Fonts makes it that one step easier.

Let me know what you think!

Cheers,

Laura x