How To Add Adobe Fonts To WordPress

Your brand uses Proxima Nova. Google Fonts does not have it. That is how most people end up learning how to add Adobe Fonts to WordPress.

The process is not hard. It is just scattered across four different methods, and the tutorial you found probably picked the wrong one for your setup.

This guide covers all four routes:

• A plugin, no code needed
• A functions.php enqueue for classic themes
• A theme.json entry for block themes
• Native fields in Elementor and Divi

You will also get the web project setup on Adobe’s side, the CSS to apply your typeface to headings and buttons, and fixes for the times fonts refuse to load.

What Is Adobe Fonts?

Adobe Fonts is a subscription font library that serves typefaces to websites through a hosted stylesheet on use.typekit.net. Every Creative Cloud plan includes it. The library carries more than 30,000 fonts from over 150 type foundries, licensed for both personal and commercial work.

The service started life as Typekit, founded in 2008 and launched publicly in 2009. Adobe bought it in October 2011 and renamed it Adobe Fonts in October 2018.

The old name never fully died. Your embed code still points at use.typekit.net, and half the WordPress plugins in this space still say “Typekit” in their settings screens.

Adobe added over 1,500 families in April 2025, including Helvetica, Avenir, and Times New Roman.

Web Use and Desktop Sync Are Separate Permissions

Desktop sync: activates font files on your machine through the Creative Cloud desktop app, for Photoshop, Illustrator, and InDesign.

Web use: serves the font over Adobe’s network to browsers, controlled by a web project.

Activating a font for desktop does nothing for your site. Two separate switches. Designers who already handled the same activation step inside a Figma file will recognize the pattern.

One rule that trips people up: Adobe’s Terms of Use forbid self-hosting the web font files. You cannot download the .woff2 and drop it in your theme folder. The embed code is the only legal delivery route.

What the Project ID Does

The project ID is the 7-character string inside your embed URL. In https://use.typekit.net/abc1234.css, the project ID is abc1234.

Every WordPress plugin and page builder field that asks for a “Kit ID” wants this exact string. Same thing, older vocabulary.

Adobe has run three separate access levels since Fall 2022, so check your account page before assuming your plan covers the family you picked.

What Is Required Before Adding Adobe Fonts to WordPress?

Four things: an Adobe account with font access, a WordPress administrator role, a web project holding your chosen typefaces, and a safe place to put code (a child theme or a snippet plugin). No FTP access needed for the plugin route.

Adobe side: any account level that includes the family you want, plus a saved web project.

WordPress side: administrator capability, since Appearance and Plugins are both locked behind it.

Code side: a child theme, WPCode, or Code Snippets, but only if you skip the plugin method.

Theme type: classic or block, because that single fact decides which of the four methods actually applies to you.

The Domain Whitelist Requirement No Longer Exists

Plenty of tutorials still tell you to add www, non-www, staging, and localhost to your project settings before the fonts will render.

That was true in the Typekit era. It is not true now.

Adobe’s own documentation states you do not need to specify a list of domain names for a web project, and there is no limit on how many sites can use the same project.

Which is handy, honestly. One project can cover your production site, your staging subdomain, and your local build with zero extra configuration.

Knowing Whether Your Theme Is Classic or Block

Open Appearance in the admin sidebar. If you see Editor, you have a block theme and theme.json controls typography. If you see Customize, you have a classic theme.

WordPress powers 41.5% of all websites as of July 2026 according to W3Techs, and the installed base is heavily split between these two setups. Twenty Twenty-Five is block. Astra, GeneratePress, and most commercial themes still run classic or hybrid.

How Do You Create an Adobe Fonts Web Project?

Browse fonts.adobe.com, click the </> button on a font family, name a new web project, tick the weights and styles you need, then copy the embed code. Adobe generates a stylesheet URL immediately. Total time: under two minutes.

The web project is the container. Fonts go in, an embed code comes out, and every site using that code gets whatever is currently inside the project.

Add a second family later by clicking </> on that font and picking your existing project name from the menu instead of creating a new one. The embed URL stays the same.

Weight and Style Selection Controls Your Payload

Each weight and style you tick is another file the browser downloads.

Regular 400, Bold 700, and one italic covers most sites. Twelve weights covers a design system, and it costs you accordingly.

Ticking a weight you never write CSS for is pure waste, and I have opened plenty of client projects with all nine weights checked and exactly two in use.

Character Sets and Subsetting

Dynamic subsetting watches the DOM and requests new glyphs as content changes, which means it loads through a JavaScript loader rather than a plain stylesheet link.

Adobe notes that occasional 404 responses are normal with dynamic serving, since the loader checks whether a subset already exists before requesting it.

The Embed Code and font-display

The default embed code is one line:

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

An @import version exists for stylesheets. Skip it. Imports serialize the request chain and cost you paint time.

Click Edit Project to set a font-display value directly in Adobe’s editor. Web Almanac 2020 data put median mobile LCP at 9,625ms for block, 8,748ms for swap, and 6,598ms for optional.

Which Methods Add Adobe Fonts to WordPress?

Four methods work: a dedicated plugin, a wpenqueuestyle call in functions.php, a fontFamilies entry in theme.json, or a page builder's native Project ID field. The plugin route needs no code. The theme.json route gives block themes a proper font dropdown.

All four survive a theme update as long as you avoid editing parent theme files directly.

Elementor runs on 31.2% of WordPress sites as of May 2026 per W3Techs, so for roughly a third of the WordPress web the builder field is the shortest path and the other three methods are redundant.

My preference: theme.json for block themes, functions.php everywhere else. The plugin is fine, but you are installing 300KB of PHP to output one link tag.

How Do You Add Adobe Fonts With a Plugin?

Install Custom Adobe Fonts (Typekit) from the plugin directory, go to Appearance > Adobe Fonts, paste your Project ID, and save. The plugin fetches the font list from Adobe and registers each family for Astra, Beaver Builder, and Elementor typography controls.

Where the ID goes: Appearance > Adobe Fonts > Add Kit ID.

What appears after saving: the full family list from your project, ready to select in the Astra Customizer.

What does not happen automatically: registration inside the block editor typography sidebar for unsupported themes.

That last point matters. The plugin injects the stylesheet, but a theme without an integration hook leaves you writing CSS declarations by hand anyway, which defeats the reason you installed it.

When the Project ID Field Rejects Your Input

The most common support thread on this plugin is the “Please enter the valid Project ID” error appearing with a correct ID pasted in.

Two causes: you pasted the full URL instead of the 7-character string, or Adobe’s CDN has not propagated your newly saved project yet. Elementor’s own documentation warns the sync takes several minutes.

If the plugin install itself fails before you get that far, the problem sits with your host rather than Adobe, and blocked plugin installation has its own set of causes.

How Do You Add Adobe Fonts With functions.php?

Register the Typekit stylesheet with wpenqueuestyle on the wpenqueuescripts hook. Three lines in a child theme functions.php file. This method loads the font in the correct dependency order and gives caching plugins a named handle they can recognize and exclude.

` function wpdadobefonts() { wpenqueuestyle( 'adobe-fonts', 'https://use.typekit.net/abc1234.css', array(), null ); } addaction( 'wpenqueuescripts', 'wpdadobefonts' ); `

Pasting the raw tag into header.php works too, and I would still not do it. A hardcoded tag has no handle, so WP Rocket and Autoptimize cannot target it for exclusion, and a parent theme update wipes the file.

Set the fourth argument to null. Passing a version string appends a query parameter to Adobe's URL that some CDN configurations mishandle.

One misplaced semicolon here produces a fatal error and a white screen. Keep FTP or file manager access open before you save. Full syntax rules for editing functions.php safely apply the same way here.

Loading Adobe Fonts in the Block Editor Preview

The front end renders your font. The editor still shows the theme default. Frustrating, and the fix is one extra line.

` addaction( 'enqueueblockeditorassets', 'wpdadobefonts' ); `

Reusing the same callback on both hooks means the identical handle registers in both contexts.

Classic editors use addeditorstyle() instead, which accepts a stylesheet path rather than a hook.

Using a Code Snippet Plugin Instead of a Child Theme

No child theme? WPCode and Code Snippets both store PHP in the database rather than a theme file, so the code survives theme switches entirely.

Paste the same function, set it to run everywhere, activate.

Snippet plugins also catch fatal errors before they take the site down, which is a real advantage over the built-in theme file editor. That editor is hidden by default on many managed hosts, and a missing theme editor is usually a deliberate host restriction rather than a bug.

How Do You Add Adobe Fonts to a Block Theme With theme.json?

Add an entry to settings.typography.fontFamilies with a fontFamily value, a display name, and a slug. Skip the fontFace array entirely, because Adobe's hosted stylesheet already delivers the @font-face rules. The family then appears in the Site Editor typography dropdown.

` { "version": 3, "settings": { "typography": { "fontFamilies": [ { "fontFamily": ""proxima-nova", sans-serif", "name": "Proxima Nova", "slug": "proxima-nova" } ] } } } `

The fontFamily string has to match Adobe’s CSS value exactly, quotes included. Copy it from the project page rather than typing it from the font’s display name.

Your slug becomes a CSS custom property: –wp–preset–font-family–proxima-nova. Use it in any block or pattern stylesheet.

Registering the family in theme.json does not load it. You still need the enqueue from the previous section, or a plugin, to pull the stylesheet in. theme.json handles the dropdown, the enqueue handles delivery.

Why Adobe Fonts Never Appear in the Font Library

WordPress 6.5 shipped the Font Library, letting administrators install fonts from Appearance > Editor > Styles > Typography > Manage Fonts.

It will not show Adobe Fonts. The Font Library downloads font files to your uploads directory, and Adobe’s licensing forbids storing the files locally.

Google Fonts installed through that panel land on your server. Adobe families stay on Adobe’s network. Two different delivery models, one panel, and the mismatch confuses a lot of people running current WordPress versions.

Applying the Family in Global Styles

Open Appearance > Editor, click the Styles icon, then Typography.

Set Text and Headings independently. Each accepts any family registered in theme.json.

Twenty Twenty-Five exposes these controls out of the box, and changes save to the database rather than back into theme.json, so your theme file stays clean.

How Do You Add Adobe Fonts in Elementor, Divi, and Other Page Builders?

Elementor Pro accepts your Project ID at Elementor > Settings > Integrations. Divi takes the raw embed code at Theme Options > Integration. Beaver Builder needs the Custom Adobe Fonts plugin. Only Elementor puts Adobe families into its typography dropdown without extra CSS.

Page builders override theme typography, so whatever you set in the Customizer loses to whatever the builder outputs. Handle the font at the builder level or fight your own stylesheet forever.

Elementor Pro Is the Only Native Integration

Path: Elementor > Settings > Integrations > Adobe Fonts (TypeKit).

Action: paste the Project ID, click Get Project ID, wait.

Catch: Elementor’s own documentation warns the sync takes several minutes while Adobe’s CDN updates.

Re-sync every time you add a family to the web project. New fonts do not appear in the dropdown on their own.

Divi Loads the Font but Hides It From the Builder

Paste the full tag into Divi > Theme Options > Integration, in the box labeled "Add code to the head of your blog".

The font loads. The Visual Builder dropdown still shows Google Fonts only.

You assign it with a custom class under Advanced > CSS ID & Classes, then write the rule in Theme Options > Custom CSS. Elegant Themes confirmed in May 2025 that Divi 5 still has no native Adobe Fonts integration.

Beaver Builder, Bricks, and Oxygen

Beaver Builder is the easy one. The Custom Adobe Fonts (Typekit) plugin registers families directly into its typography controls, same as Astra.

Bricks and Oxygen both expose a code area for the head tag, and both need CSS afterward.

The one thing every builder shares: the font family string has to match Adobe’s CSS value character for character. “Proxima Nova” fails. “proxima-nova” works.

How Do You Apply Adobe Fonts to Headings, Body Text, and Buttons?

Write font-family declarations using the exact value from your Adobe project page, then set font-weight numerically to match the weights you selected. Loading a stylesheet does nothing on its own. The browser needs a CSS rule pointing an element at the family.

` body { font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif; font-weight: 400; }

h1, h2, h3, h4, h5, h6 { font-family: “proxima-nova”, “Helvetica Neue”, Arial, sans-serif; font-weight: 700; }

.wp-block-buttonlink { font-weight: 600; } `

Adobe lists the exact font-family value and the available weights on your web project page. Copy from there, not from the font’s display name.

Weights Have to Exist in the Project

Declaring font-weight: 600 when your project only includes 400 and 700 does not fail loudly.

The browser synthesizes a fake bold instead, and the result looks smeared next to the real thing.

Check the project first, then write the CSS. Backwards is how you end up with three weights loading and one of them unused.

Fallback Stacks Prevent Blank Text

Two stacks, two different failure modes.

Weak: “proxima-nova”, sans-serif hands the browser a generic default with unpredictable metrics.

Better: “proxima-nova”, “Helvetica Neue”, Arial, sans-serif names a near-metric match before falling back.

Metric mismatch is the whole game here. A fallback that runs wider or taller than the real face shifts your layout when the swap happens, and readable type at every stage of loading depends on that first paint not being garbage.

Where the CSS Belongs

Appearance > Customize > Additional CSS works and survives theme updates. Fine for two or three rules.

Anything larger belongs in a child theme stylesheet, where it is version-controlled and readable.

Font sizing and rhythm are separate decisions from family selection. Adjusting type size across your site and setting line spacing that suits the new face both need revisiting once a new typeface lands, since x-height varies wildly between families.

Why Do Adobe Fonts Fail to Load in WordPress?

Six causes account for nearly every failure: a caching plugin stripping the stylesheet, a Content Security Policy blocking use.typekit.net, a mistyped font-family value, Cloudflare Rocket Loader interfering, an expired Creative Cloud subscription, or a browser extension blocking third-party requests.

Note what is not on that list. Domain settings.

Adobe removed the domain requirement, so a tutorial telling you to add www and non-www variants is sending you to configure something that no longer exists.

Subscription lapse is instant and total. Adobe Fonts requires an active plan, and when it expires the font files stop serving and your fallback stack takes over.

Adobe’s status page is the fastest check for a network-side outage, and a failed resource error pointing at use.typekit.net usually means exactly that.

Checking the Typekit Request in DevTools

Open DevTools, go to Network, filter by CSS, reload.

You are looking for one request to use.typekit.net with a 200 status.

No request at all means the enqueue or embed never fired. A 403 means the project was deleted or the subscription lapsed. A 200 with the wrong font still rendering means your CSS selector is the problem, not the delivery.

Occasional 404s from dynamic subsetting are normal per Adobe, and only matter if you see several on the same primer request.

Excluding Adobe Fonts From Caching Plugins

WP Rocket, Autoptimize, and LiteSpeed Cache all touch external stylesheets, and all three can break Adobe delivery in the same way.

Remove Unused CSS: strips selectors the scanner never saw, including font-family rules on dynamically rendered elements.

Load CSS Asynchronously: pushes the Typekit request behind critical CSS and delays the swap.

Combine CSS: cannot merge a cross-origin file, so it sometimes drops the reference.

WP Rocket takes the path after the domain for external exclusions, so /abc1234.css rather than the full URL.

Cloudflare Rocket Loader and Browser Extensions

Rocket Loader defers every script until after render, and Cloudflare’s own documentation calls compatibility a known limitation.

Disable it at Speed > Optimization, or add data-cfasync=”false” to the Typekit script tag if you use dynamic subsetting.

Privacy extensions block p.typekit.net too. Test in an incognito window with extensions off before you tear apart a working config, and verifying across browsers takes two minutes and rules out half the suspects.

How Do Adobe Fonts Affect Core Web Vitals?

Adobe Fonts adds a render-blocking stylesheet on a third-party origin, which delays First Contentful Paint and can delay Largest Contentful Paint when your LCP element is text. Preconnect hints, fewer weights, and a metric-matched fallback stack recover most of the loss.

Web Almanac 2020 measured font hosts directly: use.typekit.net performed as fast as or slightly faster than Google Fonts on desktop, and noticeably slower on mobile.

Only 62% of mobile pages hit a good LCP score per 2025 Web Almanac data, making it the hardest of the three metrics to pass.

Preconnect to Both Typekit Origins

` <link rel="preconnect" href="https://use.typekit.net" crossorigin> <link rel="preconnect" href="https://p.typekit.net" crossorigin> `

The crossorigin attribute is not optional. Without it the browser opens a second connection for the actual font request and the preconnect is wasted.

CDN Planet measured roughly 100ms saved on Google Fonts using this exact technique, and resource hints commonly shave 100 to 400ms off LCP.

Weight Count Is Your Biggest Lever

The 2025 Web Almanac puts the median font file in the mid-30s KB range, with the 75th percentile in the mid-70s KB.

Four weights at that median lands you around 140KB of type. Twelve weights triples it.

The median desktop homepage already ships 131KB of fonts across 4 files according to 2024 Web Almanac page weight data. Adobe families are not automatically heavier, but every extra style you tick in the project editor is a request you chose to make.

Layout Shift From the Font Swap

CLS comes from the fallback and the real face occupying different amounts of space.

Set font-display in Adobe’s project editor rather than your CSS, since you do not own the @font-face rules.

Web Almanac 2020 recorded median mobile LCP of 6,598ms with optional against 9,625ms with block. Swap is the sane default for body copy, and text that sits in the first screenful before any scrolling is exactly where a three-second block period does the most damage.

How Do Adobe Fonts Compare to Google Fonts and Self-Hosted Fonts?

Adobe Fonts requires an active subscription and forbids local hosting. Google Fonts is free and can be self-hosted legally. Self-hosting a purchased font gives full control over caching and privacy. Library exclusivity is the reason to pay Adobe.

Licensing Is the Real Difference

Adobe’s Terms of Use cover personal and commercial work on any number of sites, with no pageview cap.

What they do not cover is possession. You never hold the files.

Cancel Creative Cloud and every site using that project reverts to fallback fonts the same day. Google Fonts and purchased licenses carry no such dependency, which matters for a client site you will hand over and stop maintaining.

The Privacy Question Both Services Share

The Munich Regional Court ruled on 20 January 2022 (case 3 O 17493/20) that loading Google Fonts from Google’s CDN transmitted a visitor’s IP address unlawfully, awarding 100 euros in damages.

Adobe’s delivery model raises the same structural question, since use.typekit.net receives visitor IP addresses the same way.

Adobe states it does not set cookies to serve fonts, and the p.gif request from p.typekit.net is a tracking image used to pay foundries rather than a cookie.

Germany’s Federal Court of Justice referred related questions to the CJEU in August 2025 (case VI ZR 258/24), so the legal position is still moving. Local hosting solves it for Google Fonts. Adobe leaves no equivalent exit.

When Self-Hosting Wins

Self-hosting a licensed .woff2 removes the third-party connection entirely, which is why 31.5% of desktop sites now exclusively self-host per the 2025 Web Almanac, up from 28% a year earlier.

You get preload instead of preconnect, browser cache control, and no cross-origin handshake.

The trade: one-time license fees per weight, sometimes hundreds of dollars for a full family.

Pick Adobe when the typeface is only available there. Freight Sans, Proxima Nova, and the Helvetica and Avenir families Adobe added in April 2025 have no free equivalent, and that exclusivity is what the subscription actually buys.

FAQ on How To Add Adobe Fonts To WordPress

Do you need a paid Creative Cloud subscription?

No. A free Creative Cloud membership includes over 1,000 fonts with web use permitted.

Paid plans unlock the full 30,000-plus library. Check your account page, since Adobe has run three separate access levels since Fall 2022.

What happens if your Adobe subscription expires?

Fonts stop serving immediately.

Adobe Fonts requires an active plan, so every site using that web project drops to your fallback stack the same day the subscription lapses. No grace period, no warning banner.

Can you self-host Adobe Fonts on your server?

No. Adobe’s Terms of Use forbid downloading the web font files or uploading them to a hosting platform.

The embed code pointing at use.typekit.net is the only permitted delivery route for websites.

Do you still need to add your domain to the web project?

No longer. Adobe dropped that requirement, and its documentation confirms there is no limit on how many sites can use one project.

Tutorials telling you to whitelist www, staging, and localhost are outdated.

Where do you find the Project ID?

On the Web Projects page under Manage Fonts.

It is the 7-character string inside your embed URL, so in use.typekit.net/abc1234.css the Project ID is abc1234. Plugins asking for a Kit ID want the same value.

Why do Adobe Fonts never appear in the WordPress Font Library?

The Font Library downloads font files into your uploads directory, and Adobe’s licensing forbids local storage.

Google Fonts installed through that panel land on your server. Adobe families stay on Adobe’s network permanently.

Can you add Adobe Fonts without a plugin?

Yes. Register the stylesheet with wpenqueuestyle on the wpenqueuescripts hook inside a child theme functions.php file.

Three lines. Block themes also need a fontFamilies entry in theme.json to expose the family in Global Styles.

How many weights should you add to a project?

Three or four covers most sites: regular 400, bold 700, and one italic.

Each weight is a separate file, and the 2025 Web Almanac puts the median font file in the mid-30s KB range.

Why does the font load on the front end but not in the block editor?

The stylesheet only registered on the front-end hook.

Add the same callback to enqueueblockeditorassets so the identical handle loads in both contexts. Classic editors use addeditorstyle() with a stylesheet path instead.

Do Adobe Fonts slow down a WordPress site?

Somewhat. The embed adds a render-blocking stylesheet on a third-party origin, which delays First Contentful Paint.

Preconnect to use.typekit.net with the crossorigin attribute and trim unused weights to recover most of that cost.

Conclusion

Knowing how to add Adobe Fonts to WordPress is one decision, not four. Pick the method that matches your theme type and stop there.

The part most people skip is the audit afterward. Open DevTools, confirm the request to use.typekit.net returns 200, then count how many weights you actually declared in CSS.

Three things to do before you close the tab:

• Trim unused weights from the web project
• Add a preconnect hint for use.typekit.net
• Exclude the stylesheet from your caching plugin’s unused-CSS pass

Your fonts live on a Creative Cloud subscription. A lapsed renewal takes the typography down with it, and a metric-matched fallback stack is all that stands between that and unreadable pages.