There are a number of scripts and WordPress plugins that allow you to use Google Fonts on your web sites. I’m now using Google Fonts Manager on my WordPress sites.

However in order to do so, you need to first generate a Google Fonts API key, and it’s not obvious how to do this.

After figuring it out I decided to run through the process again and take some screenshots and annotate them so that you won’t run into the same head scratching trial and error problems I did.

Good old me. :roll:

Seriously though, if you appreciate what I’ve done or at all like it in any way, then please link to this article from your web site or use the social sharing buttons at the bottom. Your readers will appreciate it as much as I do, and if it’s more easily found then it will save even more people going through the trial and error that I did. Thanks.

The first thing you need to do is go the Google Developers Console and log in using your Google account. If it’s the first time you’ve used it then you may need to agree to some terms and conditions.

#1 – Assuming you’ve gone through that, then the first thing you need to do is create a new project like this.

google-fonts-api-new-01

 

#2 – Enter a project name and click the “Create” button.

google-fonts-api-new-02

 

#3 – You’ll then be taken to the API Project details for the new project you just created. Click on “APIs & auth” to extend the menu list down and then click on the “Credentials” link.

google-fonts-api-new-03

 

#4 – Next click the “Create new Key” button under the “Public API access” section, and you’ll see a popup overlay to create your new key. There are four options and the one you want to select is the “Browser Key” button.

google-fonts-api-new-05

 

#5 – You’ll now see a window that allows you to generate the actual key (at last). Do NOT fill in the referrers box. This caused me a lot of problems and the key just wouldn’t work, and it only all started working when I left it blank. It actually says it’s optional but then talks about adding them before you go into production. Don’t bother and it will all work fine across all your sites.

Just click the “Create” button.

google-fonts-api-new-06

 

#6 – Finally, you will see the API key you need to use with your web scripts and WordPress plugins. Hurrah!

google-fonts-api-new-07

 

I found that the API key doesn’t work immediately, and took nearly 2 hours before the plugin I was using managed to receive authentication access from Google. So go watch a movie or do something else for a couple of hours while you’re waiting for it all to work.

Once it does start working then it will work for all your sites and not just the one you’ve first used it on.

Have fun.

 

-Frank Haywood