Creating a Google Fonts API Key

This page walks you through creating a Google Fonts API key, a small token M Chart Pro uses to look up the list of Google Fonts and the weights and styles each one offers. You only need to do this once per WordPress site, and it's a prerequisite for picking custom Google Fonts in the Theme Builder.

Why this is needed

M Chart Pro can embed any font from Google Fonts in your charts, but to show you a searchable list of every font and its available weights and styles it has to ask Google's catalog directly. An API key is just a token that tells Google's catalog who's asking. The key only reads metadata about fonts that are already free and public, it does not give M Chart access to your Google account, your Drive, or anything else.

Before you start

  • A Google account, any free Gmail address works
  • About 5 minutes
  • You do not need to enable billing or pay for anything. The Web Fonts Developer API is free and has no cost-tier requirement.

Already set up a service account?

If you previously followed Creating a Google Service Account for the Google Sheets integration, you already have a Google Cloud project. You can reuse it here, skip to Step 2.

Step 1, Create a Google Cloud project

A "project" in Google Cloud is just a container for the things you set up, in this case, the Web Fonts Developer API access and the API key itself. It costs nothing to create.

  1. Go to console.cloud.google.com and sign in with your Google account.
  2. If this is your first time signing in, Google may ask you to agree to its terms of service and pick a country. Accept and continue, you do not need to start a free trial or add a credit card.
  3. At the top of the page, next to the Google Cloud logo, click the project picker dropdown. It shows the current project name, or Select a project if none is selected.
  4. In the dialog that opens, click New Project in the top-right.
  5. In the Project name field, type a name you'll recognize later, M Chart is a good choice.
  6. Leave the Location field as is.
  7. Click Create.

Google takes a few seconds to create the project and then switches to it automatically. Confirm the project name now shows in the picker at the top of the page before continuing.

Step 2, Enable the Web Fonts Developer API

Each Google API has to be turned on per-project before you can use it.

  1. Click the navigation menu (the three-line icon at the top left, sometimes called the "hamburger" menu).
  2. Choose APIs & Services → Library.
  3. In the search box, type Web Fonts Developer API.
  4. Click the Web Fonts Developer API result.
  5. Click the Enable button.

Pick the right one

The library also lists a similarly-named Web Fonts API, that one delivers the actual font files for embedding and does not need a key. M Chart needs the Web Fonts Developer API, which is the metadata catalog. Make sure the result you click has the word Developer in its name.

Enabling can take a few seconds. When it finishes you'll be taken to the API's overview page, that means it worked.

Step 3, Create and configure the API key

The Cloud Console lets you create the key and lock it down to exactly what M Chart needs in the same form. Configure both restrictions on the form before you click Create.

  1. Click the navigation menu (☰) again.
  2. Choose APIs & Services → Credentials.
  3. At the top of the page, click Create credentials, then choose API key from the menu.
  4. The new-key form opens. Don't click Create yet
  5. First give it a good name, M Chart Fonts is a good choice.
  6. Then do the two sections below:

API restrictions

This is the most important restriction, it stops the key from being used against any Google API other than the fonts catalog.

  1. Find the API restrictions section.
  2. Choose Restrict key.
  3. From the dropdown, check only Web Fonts Developer API.

Application restrictions

Restricting the key to your own domain means anyone who finds it on a different site can't use it.

  1. Scroll down to the Application restrictions section.
  2. Choose Websites.
  3. Click Add a website and enter your site using one of these URL patterns:
    • example.com/*, covers all pages on a plain domain (no www., no subdomain)
    • *.example.com/*, covers www.example.com, blog.example.com, or any other subdomain
  4. Add other patterns the same way if your charts run in more than one place (a staging site, an admin URL, etc.).

Skip this if you're not sure

Website restrictions can break things if your domain changes or your charts load from a CDN. If you're unsure, leave Application restrictions set to None, the API restriction above is the one that really matters.

  1. Click Create at the bottom of the form.
  2. A dialog appears showing your new API key, a long string of letters and numbers. Click the Copy icon to copy it to your clipboard.

Step 4, Add the key to M Chart

  1. Back in WordPress, go to Chart → Settings.
  2. Find the Google Fonts section.
  3. Paste the key into the Google Fonts API Key field.
  4. Save the settings page.

You're done. The next time you open the Theme Builder, the Google Fonts picker will load the full font catalog with weights and styles available for each family.

Keep your API key safe

Caution

An API key is not a public identifier, it's more like a password. Anyone who has it can spend your quota and, if you skipped the restriction step, use it against other Google APIs.

  • Don't email it.
  • Don't paste it into chat tools, support tickets, or screenshots.
  • Don't commit it to a Git repository.
  • After you've pasted it into M Chart, you can safely delete the local copy from your clipboard.

If you think a key has been exposed, come back to APIs & Services → Credentials, click the key, and choose Regenerate key, or delete it outright and create a new one.

Next steps

Once the key is saved, head to Chart → Chart Themes and open the Theme Builder to start using custom Google Fonts in your chart themes.

Troubleshooting

"API key not valid" or "API key invalid" errors in the Theme Builder. The key was created in a project where the Web Fonts Developer API isn't enabled. Go back to Step 2 and confirm the API shows as enabled in the same project the key was created in.

"Requests from referer … are blocked" errors. The website restrictions in Step 3 are too strict. Open the key in Credentials, change Application restrictions to None, and save. If the problem only happens on one specific page, add that page's domain to the website list instead.

Google is asking me to start a free trial or enable billing. You can dismiss those prompts. The Web Fonts Developer API is free and is not part of Google's billing-required tier. Creating an API key is free.

"I lost my key." You can come back to APIs & Services → Credentials at any time and click the key's name to view it again. There's no need to create a new one unless the key has been exposed.

"I see a lot of similarly named APIs in the library." There are several. The right one is Web Fonts Developer API, confirm the word Developer appears in the name before you click Enable.

Last Updated:
Contributors: Jamie Poitra