Adobe Fonts (Typekit) Setup

This page walks you through creating an Adobe Fonts Web Project, the modern equivalent of what used to be called a "Typekit kit", so M Chart Pro can embed Adobe fonts in your charts. Each theme that uses Adobe Fonts needs a Web Project ID; a single project can be shared across multiple themes if they use the same fonts. This is a prerequisite for picking custom Adobe Fonts in the Theme Builder.

A note on the old Typekit API

If you're searching for "Adobe Typekit API key", you've come to the right page. Adobe retired the standalone Typekit service and the public Typekit API key model that went with it. The current way to use Adobe Fonts on a third-party website is through a Web Project, which gives you a single project ID embedded in a <link> tag. M Chart Pro uses that project ID the same way the old API key was used.

Why this is needed

M Chart Pro can embed Adobe Fonts in your charts, but Adobe requires you to first tell their service which fonts and which weights you intend to load on your site, that's what a Web Project is. The project ID you'll copy at the end of this page is what M Chart pastes into the chart's HTML output to load those fonts from Adobe's font network.

Before you start

  • An Adobe account. A free Adobe ID gives you access to a small starter library; a Creative Cloud subscription (any paid plan, including the Photography or single-app plans) gives you access to the full Adobe Fonts library.
  • About 5 minutes
  • The list of fonts and weights you want to use in your charts. You can change this later, but it helps to have a rough idea.

Free vs Creative Cloud

Free Adobe IDs can create Web Projects, but the font catalog is limited to a small free subset. If a font you want isn't selectable, that's why, it requires an active Creative Cloud subscription on the Adobe ID you signed in with.

Step 1, Sign in to Adobe Fonts

  1. Go to fonts.adobe.com and sign in with your Adobe ID. Click Sign In in the top-right if you aren't already signed in.
  2. The site lands you on the font browse page.

Step 2, Find a font you want to use

Browse or search for a font family you want in your charts.

  1. Use the search box at the top of the page, or browse by category in the sidebar.
  2. Click a font's name to open its detail page, where you can preview it at different weights.

You'll add the first font to a brand-new Web Project in the next step. Don't worry about picking the perfect font right now, you can add and remove fonts at any time after the project is created.

Step 3, Create a Web Project and add your first font

A Web Project is the unit Adobe uses to group the fonts a single website is allowed to load. You'll create one project per WordPress site.

  1. On the font's detail page, look for the </> button (it shows two angle brackets and a slash). Click it.
  2. A panel opens titled Add fonts to a Web Project.
  3. Open the project menu and choose Create a new project.
  4. In the Project name field, type a name you'll recognize later, M Chart Fonts is a good choice.
  5. Use the checkboxes below the font preview to select only the weights and styles you actually intend to use in your charts. Each weight you check adds to what gets downloaded by every visitor to your site, so pick the minimum you need (often Regular 400 and Bold 700 are enough).
  6. Click Create.

Adobe creates the project and adds your selected font to it.

Pick weights conservatively

Every weight and style you add increases the total file size of the embed for everyone visiting your site. A chart usually needs only one or two weights. You can always come back and check more boxes later.

Step 4, Add more fonts to the same project (optional)

If you want more than one Adobe font available in your charts, add them to the same project rather than creating new projects.

  1. Browse to another font's detail page.
  2. Click the </> button.
  3. In the Add fonts to a Web Project panel, open the project menu and choose your existing project name (for example M Chart Fonts), not Create a new project.
  4. Pick weights and styles, then click Add.

You can repeat this for as many fonts as you need.

Step 5, Find your project ID and embed code

  1. From the top navigation, open your account menu and choose Manage Fonts → Web Projects. (You can also go straight to fonts.adobe.com/my_fonts#web_projects.)

  2. Find your project in the list and click it.

  3. The project page shows the embed code, which looks like this:

    <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

  4. The string in place of xxxxxxx is your project ID. Copy just the project ID, that's what M Chart needs.

You don't need the whole <link> tag

M Chart writes the <link> tag for you. All you need to copy is the short ID between use.typekit.net/ and .css.

Step 6, Use the project ID in a theme

The project ID is set per theme in M Chart's Theme Builder, not as a single plugin-wide setting. Each theme that should use Adobe Fonts gets its own copy of the ID, you can paste the same ID into multiple themes, or use different projects for different themes.

  1. Back in WordPress, open the Theme Builder and create or edit a theme.
  2. On the theme's Chart element, set the Font field to Adobe Fonts.
  3. An Adobe Fonts Project ID field appears. Paste the project ID into it.
  4. Save the theme.

You're done. Repeat for any other theme that should use the same (or a different) Adobe Web Project. The font families and weights you added to the project are available to charts using that theme.

Restricting the project to what your charts actually use

There's no separate "permissions" step for an Adobe Web Project, instead, you control what gets loaded by editing what's in the project itself. To keep your chart embeds light:

  • Add only the fonts you actually plan to use in chart themes.
  • For each font, check only the weights and styles your charts need.
  • Remove fonts you tried out but decided against.

To edit a project later, return to Manage Fonts → Web Projects, click the project, and use the Edit Project button. Changes apply on every site that uses the project ID, there's no separate publish step.

One project, or one per theme

Because the Web Project ID is set per theme, you have two reasonable workflows:

  • Share one project across themes (most common), paste the same project ID into every theme that uses Adobe Fonts. All those themes draw from the same set of fonts and weights, and visitors only download one Adobe embed regardless of how many themes are in play.
  • Use a different project per theme, create a separate Adobe Web Project for each theme so you can tune the font list and the weights that ship to visitors per theme. Useful if your themes target very different brands or page types.

Each project is a separate embed, so picking one shared project is the lighter option unless you have a reason to keep font sets apart.

Keep your project ID safe

Caution

A Web Project ID is less sensitive than an API key, but it's still tied to your Adobe account and your domain list, anyone who has it can use the same fonts on their own site, and the page-view traffic counts against the same project.

  • Don't email it to people who don't need it.
  • Don't paste it into public support tickets, screenshots of your settings page, or screencasts.
  • Don't commit it to a public Git repository.

If a project ID has been exposed and you want to invalidate it, return to Manage Fonts → Web Projects, delete the project, and create a fresh one. The new project will have a different ID, and you'll need to update every theme that referenced the old ID.

Next steps

Open the Theme Builder and create or edit a theme that should use Adobe Fonts. Set its font source to Adobe Fonts, paste the project ID into the Adobe Fonts Project ID field, and save the theme. Repeat for any other theme that needs the same (or a different) Web Project.

Troubleshooting

"I can't select the font I want, the checkbox is greyed out." That font requires a Creative Cloud subscription. Sign in with an Adobe ID that has an active paid plan, or pick a font from the free library subset.

"I don't see the </> button on the font page." Make sure you're signed in. The button is hidden for users who aren't logged into an Adobe account. If you're signed in and still don't see it, the font may not be available for web embedding (a small number of foundry fonts are desktop-only).

"Where is Manage Fonts?" Click your profile icon or account name in the top-right of fonts.adobe.com, Manage Fonts is in the menu that appears. The Web Projects list lives at Manage Fonts → Web Projects.

"My fonts aren't loading on the chart." Open the theme in the Theme Builder and double-check the Adobe Fonts Project ID field on the theme's Chart element. It should be the short string from between use.typekit.net/ and .css, with no extra characters or whitespace. If the project still doesn't load, open the project in Adobe Fonts and confirm at least one font is added with at least one weight selected.

"Adobe is asking me to add my domain to the project." Some Adobe Fonts plans let you list the domains where the fonts will load. Add your WordPress site's domain (e.g. example.com) and any staging domains you publish from. Domains can be edited later from the same Web Project page.

"I had a Typekit kit ID from years ago, does it still work?" Adobe migrated existing Typekit kits to the Adobe Fonts Web Projects system; the IDs are compatible. If you're still using a kit you created when the service was called Typekit, it should work in M Chart's Project ID field unchanged. If you can't find the old kit, sign in to fonts.adobe.com and check Manage Fonts → Web Projects, your old kits appear there.

Last Updated:
Contributors: Jamie Poitra