How to Use Adobe Fonts (Typekit) in WordPress

If you have an Adobe Creative Cloud subscription, you can use thousands of premium fonts from Adobe Fonts (formerly Typekit) on your website. The setup is a little different from Google Fonts or your own font files, because Adobe serves the fonts itself.

How Adobe Fonts work on the web

Adobe Fonts are not downloaded to your server. You create a web project on Adobe’s site containing the fonts you want, and your site loads a small CSS file from Adobe that points to the fonts on Adobe’s CDN. That means:

you need an active Creative Cloud subscription,
the fonts are served by Adobe (fast, but a third-party request),
only fonts added to that web project can be used.

Step 1: create a web project

Sign in at fonts.adobe.com.
Find a font and click Add to Web Project (choose the weights you need, since fewer weights load faster).
Open Web Projects from your account menu and note the Project ID, a short code like abc1def.

Step 2: add it to WordPress

By hand: Adobe gives you an embed line with your project ID:

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

Add it to your site’s <head> (child theme or a header code tool), then use the family names Adobe shows in the web project:

h1, h2 { font-family: "your-adobe-font", Georgia, serif; }

The downside: builders and the block editor don’t know about the font, so you can’t pick it in their typography controls, and you have to type the family names in CSS.

With Font Hero: Font Hero connects your web project so the fonts behave like any other font on your site:

Go to Font Hero → Fonts → Add Font → Adobe Font.
Paste your Web Project ID and click Get Fonts List.
Select the fonts and click Import.

Font Hero registers them and loads Adobe’s CSS automatically. You can use them in your theme or builder next to your self-hosted fonts, and add them to font stacks with good fallbacks.

Privacy note

Because Adobe serves the files, visitors’ browsers connect to Adobe’s servers. If you need fonts without any third-party request (for example for strict GDPR reasons), use self-hosted fonts instead: see how to host Google Fonts locally in WordPress.

Adobe, Google and custom fonts in one place

Font Hero connects your Adobe Fonts web project and manages it alongside self-hosted fonts, with font stacks for any builder.