Skip to content

8. Implementing Google Fonts on your website

How to get the fonts on your site: Wordpress plugin + HTML techniques

by Reese Spykerman

This is part of a 10-part series on Google Fonts and how you can use them to make a beautiful website. Visit the series overview here.

It’s time.

You’ve learned about the personalities and types of fonts.

You’ve found one or two that reflect your brand.

Now you’re going to get the fonts you picked on to your site.

I’ll also share tips on how to size and style them.

Using a Wordpress Plugin for Google Fonts

If your website is on Wordpress and you aren’t a web developer, a plugin is the easiest and fastest way to get Google fonts loaded and working on your site.

If you aren’t running Wordpress and you know how to work with basic html and css, click here to jump to the section on embedding fonts.

First, go grab the plugin called “Easy Google Fonts” by the company Titanium Themes.

There are many other Google fonts plugins. This lesson assumes the Easy Google Fonts plugin is the one you’ve installed and activated. I’m not affiliated with this plugin maker in any way—this just happens to be the one I found (as of this writing) that gives you the most flexibility without needing to pay for more options.

This plugin has 600+ fonts in it. It’s possible that if you have chosen a less popular font, it might not be in here. If so, you’ll need to get a Google API key to get all the latest fonts.

The maker of this plugin says it will work with any Wordpress theme: if you run into issues, you may need to ask a virtual assistant or web developer to help.

After you’ve activated and installed the plugin, here’s  how you get the Google fonts you chose in there.

Login to your Wordpress.

  1. Go to appearance > customize.
  2. Go to Typography > default typography.

Styling Paragraphs

First up is have paragraphs, and that’s for our body text (link to series). Remember, this is where you want to keep it neutral—no fancy handwriting or some big, bold blocker all caps font.

Start typing the name of the font you chose for your body font or look for it by scrolling. After you find it, go down and make sure you’ve got the weight set to Regular.

You’ll see your text update on the fly as you change the fonts, so it’s a good way for you to gauge how your body font looks and even decide if you need to adjust the text sizing on it a bit.

What’s cool is you can also change your font color. One tip is to make sure the contrast of your text is high enough so that it’s readable. You can use this contrast checker tool to test.

Make sure your body text is big enough to be readable. Here’s a refresher on sizing:

  1. Desktop sizing: Minimum 16px, up to 24px. This doesn't mean you should be making your type so big that only a couple paragraphs show up on bigger monitors.
  2. Mobile sizing: go a bit smaller here. People hold their phones closer to their eyes than they do a desktop/laptop computer. This usually means around 15-20px. To help you, set your type size, open your site on your phone, and make sure there's at least 7-10 words per line.

Styling Headlines

You’ll see the styling for headlines right after the paragraph area.

Each level of headline gets it own styling, but I recommend you stick to the one font you chose for your headlines and repeat that font for each level. (Read more about why I recommend using the same weight throughout in the technical tips article) So if you’ve chosen Merriweather 900 weight for your headlines, you’ll apply that to every level of headline.

Hit the “publish” button when you’re done and your site should be updated with the fonts.

Here's a brief video that demonstrates all of these steps.

 

 

There may be some text that doesn’t get updated (For example, the accent text you identified in the Accent Text lesson).

In that case you’ll need to use css to target it. In the Easy Google Fonts plugin settings, there’s an area for you to create custom styles.

Styling custom css is beyond the scope of this mini-course, and if you need help with that, I recommend using a virtual assistant or Wordpress designer to help you with this task.

Embedding Fonts Directly with HTML

This is for you if you know how to work with the html on your site and want to embed your fonts directly.

  1. Go to fonts.google.com
  2. Type in the name of the font you’ve chosen for your body text
  3. Click on the plus sign to select that font.
  4. Type in the name of the font you’ve chosen for your headlines. Click on the plus sign to add that font.
  5. Click the black bar at the bottom of the screen to expand it(by now it should say “2 families selected.”)
  6. Head over to the “customize” tab
  7. For your body font, you want “regular” weight. It may also be called 400 weight.
  8. You can also add the bold and italic weights but if you want keep your site as speedy as possible (link), you can eliminate these. Your browser will make a “fake” bold and italic version of the font.
  9. For your headline font, Choose one weight you want. (Screenshot)
  10. Under languages, most of the time you’ll be fine with “latin” unless you’re running a site in non-latin languages (e.g. Cyrillic languages)
  11. Go back to the “embed” tab. Here there will be code . for embedding. It starts with <link href=
  12. Copy that whole line of text.
  13. Paste that text into your html in the head area.
  14. Style your css yourself using the rules specified by Google. In this example, they show you reference the font families by name like this:(screenshot)
  15. Google also has a getting started guide, here.

Here's a brief video that shows you the steps above:

 

 

Nice work! You’ve found fonts for your website and gotten them on your site.

For consistent branding, you can use your chosen fonts in social media graphics and presentation documents.

The next lesson is a short one on website speed and Google fonts.

Let’s find the hidden money pockets on your website.

Start with this free cheatsheet:
10 Common Website Mistakes That Are Losing You Leads and Sales
(and how to fix them, fast!)