How to Use Adobe Fonts on Your Website?

The designer who built your brand used Proxima Nova and Freight Text in every Figma file, synced from their Creative Cloud account. Now the site needs to match, and when you go looking for the WOFF2 files to self-host, there are none to download. Adobe Fonts does not hand out font files for the web. Instead, it hosts them and gives you a small piece of embed code tied to a web project. Once you understand that model, adding Adobe Fonts to a site takes about five minutes, but there are a few performance and licensing details worth getting right.

This article explains how Adobe Fonts licensing works for websites, how to create a web project, how to embed it in plain HTML, Next.js, Tailwind CSS, and WordPress, and how to keep the fonts from slowing down your pages or shifting your layout.

How Adobe Fonts Works for Websites

Adobe Fonts is a subscription font service included with Creative Cloud plans. For the web, it works as a hosted service: fonts are served from Adobe's servers at use.typekit.net, and your site references them through a CSS file generated for your project.

The key licensing points:

• Web use is included with eligible subscriptions, for personal and commercial projects.
• You cannot self-host the files. There is no download option for web fonts, and extracting the served files to host them yourself violates the terms.
• Fonts depend on an active subscription. If the account that owns the web project lapses, the project stops serving fonts and your site falls back to whatever is next in your font stack.
• There are no pageview limits on web projects under the current service.

That last dependency matters for client work. If you set up the project under your own account, the client's site typography is tied to your subscription. For long-term projects, create the web project under the client's Creative Cloud account. For the broader licensing picture, see understanding font licensing.

Creating a Web Project

1. Sign in at fonts.adobe.com and find the family you want.
2. On the family page, use the Add to Web Project option (the code-bracket icon).
3. Create a new project, give it a name like "Acme marketing site", or add to an existing one.
4. Select only the weights and styles the design uses, for example Regular, Italic, Semibold, and Bold.
5. Save. Adobe shows the embed code and the CSS font-family names to use.

Every project has a short project ID, such as abc1234, which appears in the embed URL. You can edit a project at any time from Manage Fonts → Web Projects. Changes, such as adding a weight, propagate to the hosted CSS within a few minutes without changing your embed code.

Choosing Weights Carefully

Each style you add is a separate font file the browser may download. A project with eight styles across two families is easy to create and expensive to load. Audit the design and keep only what is actually used. A typical set looks like this:

Family	Styles	Used for
Freight Text Pro	Book, Book Italic, Bold	Body text, emphasis
Proxima Nova	Semibold, Bold	Headings, buttons, navigation

Five files is a reasonable budget. If the design calls for more, push back or check whether the family is available as a variable font, which can replace several static files with one.

Project Settings Worth Changing

Open the project's settings and review two options:

• Font display: choose swap for most sites so text renders immediately in a fallback and switches when the font arrives.
• Character set: the default subset covers common Western languages. Choose a broader set only if your content needs extra characters, because larger character sets mean larger files.

Embedding the Project in HTML

Adobe's default embed is a stylesheet link. Put it in the head, along with preconnect hints for the two Adobe domains involved:

<head>
  <link rel="preconnect" href="https://use.typekit.net" crossorigin />
  <link rel="preconnect" href="https://p.typekit.net" crossorigin />
  <link rel="stylesheet" href="https://use.typekit.net/abc1234.css" />
</head>

The stylesheet at use.typekit.net contains the @font-face rules. It also imports a small request to p.typekit.net, which Adobe uses to count usage for licensing. Preconnecting to both lets the browser complete DNS, TCP, and TLS setup early.

Then use the names Adobe gives you. They are usually lowercase and hyphenated:

:root {
  --font-body: "freight-text-pro", Georgia, "Times New Roman", serif;
  --font-heading: "proxima-nova", ui-sans-serif, system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
}

Weights are mapped to standard numeric values, so font-weight: 600 selects Semibold if it is in your project. If you request a weight that is not in the project, the browser either picks the nearest available weight or synthesizes a fake bold. Add font-synthesis: none if you would rather see the nearest real weight than a smeared synthetic one.

You can also use @import url("https://use.typekit.net/abc1234.css"); at the top of a stylesheet, but an @import is discovered later than a link tag, which delays font loading. Prefer the link.

The JavaScript Embed

Adobe also offers a JavaScript embed for dynamic subsetting, used mainly for Chinese, Japanese, and Korean fonts, where full files are many megabytes. The script detects which characters appear on the page and requests only those glyphs. For Latin-script sites, stick with the CSS embed. It is simpler, does not depend on JavaScript, and renders faster.

Using Adobe Fonts in Next.js

next/font does not support Adobe Fonts, because it needs to download font files at build time, and Adobe's license does not allow that. Add the stylesheet to the root layout instead:

// src/app/layout.tsx
import "@/styles/main.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://use.typekit.net" crossOrigin="anonymous" />
        <link rel="preconnect" href="https://p.typekit.net" crossOrigin="anonymous" />
        <link rel="stylesheet" href="https://use.typekit.net/abc1234.css" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Because the font is not self-hosted, you do not get next/font's automatic fallback metric adjustment. You can add it yourself, which is covered in the fallback section below. For fonts that you are allowed to self-host, next/font remains the better option.

Using Adobe Fonts with Tailwind CSS v4

In Tailwind v4, register the Adobe family names as theme variables in your main CSS file:

@import "tailwindcss";

@theme {
  --font-sans: "proxima-nova", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "freight-text-pro", Georgia, serif;
}

Now font-sans and font-serif use the Adobe fonts, and because Tailwind's preflight sets the page default from --font-sans, body text picks it up automatically. Load the stylesheet in your HTML or layout as shown above; Tailwind only references the family names.

Using Adobe Fonts in WordPress

In WordPress, enqueue the project stylesheet. Using the enqueue_block_assets hook loads it both on the front end and inside the block editor's iframe, so editors see the real fonts while writing:

<?php
// functions.php
add_action( 'enqueue_block_assets', function () {
    wp_enqueue_style(
        'adobe-fonts',
        'https://use.typekit.net/abc1234.css',
        array(),
        null
    );
} );

add_filter( 'wp_resource_hints', function ( array $urls, string $relation ): array {
    if ( 'preconnect' === $relation ) {
        $urls[] = array( 'href' => 'https://use.typekit.net', 'crossorigin' );
        $urls[] = array( 'href' => 'https://p.typekit.net', 'crossorigin' );
    }
    return $urls;
}, 10, 2 );

In a block theme, also declare the families in theme.json without a fontFace array, so they appear in the typography controls while Adobe serves the files:

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

For self-hosted fonts in block themes, the approach is different; see changing fonts in a WordPress block theme.

Performance and Fallback Fonts

A hosted font adds a cross-origin connection and a render-blocking stylesheet. The stylesheet is small and cached, but you still want to minimize the impact:

1. Preconnect to both Adobe domains, as shown above.
2. Keep the project lean. Fewer styles means fewer requests competing with your images and scripts.
3. Use swap in project settings so text is never invisible while fonts load.
4. Build a metric-matched fallback to reduce layout shift when the font swaps in.

The fourth step uses @font-face descriptors on a local system font so it occupies the same space as the web font:

@font-face {
  font-family: "Proxima Nova Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --font-heading: "proxima-nova", "Proxima Nova Fallback", ui-sans-serif, sans-serif;
}

The percentages above are a starting point; measure them against your font by overlaying both and adjusting until line breaks match. The process is covered in size-adjust and font metric overrides.

Privacy Considerations

Because fonts are served from Adobe's servers, each visitor's browser connects to Adobe and shares their IP address. Adobe states that it uses the data for licensing and service operation, but if your legal team requires consent or a data processing review for third-party requests, Adobe Fonts falls into that category.

Troubleshooting

Problem	Cause	Fix
Font renders as fallback everywhere	Wrong font-family name	Copy the exact CSS name from the web project page
One weight looks fake or blurry	That weight is not in the project	Add the style to the project, or use font-synthesis: none
Fonts stopped working on a client site	Subscription that owns the project lapsed	Recreate the project under an active account
Fonts missing in the WordPress editor	Stylesheet only enqueued on the front end	Enqueue on enqueue_block_assets
Content Security Policy errors in console	CSP blocks Adobe domains	Allow use.typekit.net and p.typekit.net in style-src and font-src

---

Adobe Fonts FAQ

Conclusion

Adobe Fonts is the simplest way to put Creative Cloud typefaces on a website legally. Create a web project, pick only the styles the design actually uses, set font display to swap, and paste a single stylesheet link into your HTML, Next.js layout, or WordPress theme. From there, the family names work like any other font in CSS, Tailwind, or theme.json.

The trade-offs are hosting and ownership. You cannot self-host, so preconnect to Adobe's domains, keep the project small, and build a metric-matched fallback to limit layout shift. And because the fonts depend on an active subscription, make sure the right account owns the project before a site goes live.

Here are some useful references for going deeper on Adobe Fonts:

1. Adobe Fonts Help: Add fonts to your website — Adobe's guide to creating and embedding web projects.
2. Adobe Fonts Help: Font licensing — what the Adobe Fonts license covers for web, desktop, and apps.
3. MDN Web Docs: rel=preconnect — how preconnect hints speed up cross-origin requests.
4. web.dev: Best practices for fonts — loading, rendering, and fallback strategies for web fonts.