Skip to content

How to Use Adobe Fonts in WordPress for FREE?

Key Takeaways

  • Nexter Extension (Free) connects an Adobe Fonts project to WordPress when you paste the Project ID under Nexter > Extensions > Utilities > Adobe Fonts.
  • Nexter loads the published fonts from Adobe and adds them to the Nexter and Elementor font lists, Beaver Builder, and the Astra, Blocksy and Kadence customizers.
  • An invalid or unpublished Project ID returns the message Please check your Project ID in Adobe Fonts.
  • Using Adobe Fonts on a site requires an active Adobe Creative Cloud plan.
Table of Contents

To add Adobe Fonts to WordPress, copy your Adobe Fonts Project ID, go to Nexter > Nexter Extension > Utilities, switch on Adobe Fonts, paste the ID and click Save. Your Typekit fonts then load on the site and appear in the font lists of the editor and supported page builders.

Adobe Fonts and Typekit are the same service. This works with the Nexter Extension (Free) plugin, with no extra code.

Best Used For:

  • Websites that need premium Adobe typefaces that are not in Google Fonts
  • Brand projects where the fonts already sit in an active Adobe Creative Cloud plan
  • Agency or client sites that need professional typography without a separate font license

Before You Start

  • Nexter Extension (free) is installed and active.
  • You have an Adobe account with a Web Project that contains the fonts you want, and the project is published.
  • You know your project’s Project ID. If not, see the section on getting it further down.

How to Add Adobe Fonts in WordPress, Step by Step

  1. In your WordPress dashboard, go to Nexter > Nexter Extension > Utilities.
  2. Find the Adobe Fonts card and switch it on, then click Configure to open the settings panel.
  3. Paste your Adobe Project ID into the field.
Adobe Fonts panel with the Project ID field outlined and the Save button marked
  1. Click Save. Nexter asks Adobe for the fonts published in that project and loads them from Adobe’s servers.

Where Your Adobe Fonts Appear

After you save, the fonts are added to these font lists:

  • The Nexter Theme customizer typography options and Nexter Blocks typography controls
  • The Elementor typography font list, under the Custom Fonts group
  • Beaver Builder, and the Astra, Blocksy and Kadence theme customizers

To use them on a heading, see How to Add an Advanced Heading in WordPress. To upload your own font files instead, see How to Upload Custom Fonts to WordPress.

How to Get Your Adobe Fonts Project ID

  1. Sign in at fonts.adobe.com with your Adobe account and open Web Projects.
  2. If you do not have a project yet, browse the font library, open a family with View Family, click Add to Web Project, and give the project a name.
  3. In Web Projects, copy the Project ID shown for your project.
  4. If you restricted the project to specific domains in Adobe, add your site’s domain there.

Adobe changes its screens from time to time, so button labels may differ slightly from the steps above.

Is Adobe Fonts Free to Use on a WordPress Site?

Using Adobe Fonts on your site requires an active Adobe Creative Cloud plan. With that plan, the fonts are free to use in your web projects.

Troubleshooting Common Issues

If the Project ID is not accepted, Nexter shows this message after you click Save:

Error message shown when an invalid Adobe Fonts Project ID is saved
  • Check the Project ID: copy it again from Adobe and paste it without spaces.
  • Publish the project: Nexter reads the fonts Adobe has published for the project, so an unpublished or empty project returns nothing.
  • Check the domain list: if the Adobe project is limited to certain domains, your site’s domain must be on the list.
  • Check outside access: your server must be able to reach Adobe. A firewall that blocks outgoing requests can cause the same message.
  • Fonts do not show in the page builder: reload the editor after saving and clear any caching plugin.

Frequently Asked Questions

Can I use Adobe Fonts on a website?

Yes. Adobe Fonts are made for web use through a Web Project. You add the fonts to the project, then connect the project to WordPress with its Project ID.

Is Adobe Fonts the same as Typekit?

Yes. Typekit was the earlier name, and the Project ID field in Nexter uses the Typekit project from your Adobe account.

Do Adobe Fonts need Nexter Extension Pro?

No. Adobe Fonts is in the free Nexter Extension plugin.

Do the fonts load from my own server?

No. They load from Adobe’s servers. To serve Google fonts from your own server, see How to Self-Host Google Fonts in WordPress.

Next Steps and Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!