> This page is for DevLink.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Fonts in DevLink Export

> How DevLink ships Google, Adobe, and custom uploaded fonts, and what setup each one needs.

DevLink Export includes every font your Webflow site uses. There are three kinds: Google, Adobe (Typekit), and custom uploaded fonts. Each ships a little differently.

| Font type      | How it loads                                                     | Setup required                                 |
| -------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
| Google Fonts   | WebFont Loader, injected at runtime by `<DevLinkProvider>`       | None                                           |
| Adobe Fonts    | Kit script injected at runtime by `<DevLinkProvider>`            | Register your deployment domain in Adobe Fonts |
| Custom uploads | `@font-face` rules in `css/fonts.css`, served from Webflow's CDN | None (CSP if your app enforces one)            |

For Google and Adobe fonts, `<DevLinkProvider>` injects the WebFont Loader and the Adobe kit script at runtime, using the same approach as a published Webflow site.

## Google Fonts

No setup is required. Google serves Google Fonts without any domain restriction, so they render the same way on `localhost`, `*.vercel.app`, and your production domain.

If the Google Fonts script fails to load, DevLink logs a single console warning pointing at Content Security Policy as the most common cause. If your app enforces a strict CSP, allow:

* `script-src https://ajax.googleapis.com`
* `style-src https://fonts.googleapis.com`
* `font-src https://fonts.gstatic.com`

## Adobe Fonts

Adobe Fonts enforces a domain allowlist per web project. Webflow automatically adds your `*.webflow.io` staging subdomain to the allowlist.

> **Warning**
>
> Webflow cannot register the domain where your DevLink-powered app will run. You need to add your deployment domains to Adobe Fonts manually before your fonts will render.

### Register your deployment domains

#### Open your Adobe Fonts account

Go to [My Adobe Fonts → Web Projects](https://fonts.adobe.com/my_fonts#web_projects-section).

#### Open your web project

Find the web project linked to this Webflow site.

#### Add your domains

Add every domain your app will serve from:

* `localhost` for local development
* Preview domains such as `*.vercel.app`, `*.netlify.app`, `*.ngrok.io`
* Your production custom domain (e.g. `acme.com`, `www.acme.com`)

#### Save your changes

Changes propagate within a few seconds.

When a browser requests your kit (`https://use.typekit.net/<kitId>.js`), Adobe checks the request's origin against this allowlist. Unregistered origins get a 403 and fonts fall back to the next family in the CSS stack.

If the Adobe Fonts script fails to load, DevLink logs a single actionable console warning pointing at the allowlist and at CSP (`script-src https://use.typekit.net`, `font-src https://use.typekit.net https://p.typekit.net`). The warning fires only on actual failure, so correctly configured consumers see no noise.

## Custom fonts

Fonts you uploaded in **Site Settings → Fonts → Custom Fonts** (any `.woff`, `.woff2`, `.ttf`, or `.otf` files) ship as pure CSS. The exporter writes an `@font-face` block for each weight and style variant into `css/fonts.css`, with `src` URLs pointing at Webflow's CDN:

**`css/fonts.css`**

```css title="css/fonts.css"
@font-face {
  font-family: 'Brand Sans';
  src: url('https://<webflow-cdn>/.../brand-sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```

No JavaScript runs for custom fonts, no scripts are injected, and `<DevLinkProvider>` is not involved. The browser loads them the same way it loads any other external CSS asset.

**What you need to know:**

* **No allowlist or setup required.** You uploaded the files, and they serve from Webflow's CDN with permissive CORS.
* **CSP**: if your app enforces a Content Security Policy, allow Webflow's CDN in `font-src` (and `style-src` if your CSS is inline). The exact hostname is visible in the `@font-face` `src` URL in your exported `css/fonts.css`.
* **Cache**: Webflow's CDN sets long-lived cache headers. After you re-upload or delete a font in Webflow, run `webflow devlink export` to pick up the new URLs.

## Troubleshooting

#### Adobe fonts do not load

**Issue**: Adobe fonts fail to render, often with `Failed to load https://use.typekit.net/...` in the browser console.

**Solutions**:

1. Confirm your current domain is added in [My Adobe Fonts → Web Projects](https://fonts.adobe.com/my_fonts#web_projects-section), then re-deploy. No re-export is needed.
2. If your app enforces a Content Security Policy, verify it allows the Adobe Fonts CSP directives listed above.

#### Some Adobe fonts render, others do not

**Issue**: Certain Adobe fonts are missing after a kit change.

**Solutions**:

1. Re-run `webflow devlink export` after adding or removing fonts from the kit in the Webflow Designer so the manifest picks up the new families.

#### A custom uploaded font shows a 404 or does not render

**Issue**: A custom font fails to load from Webflow's CDN.

**Solutions**:

1. If you re-uploaded or deleted the font in Webflow, run `webflow devlink export` to refresh the `@font-face` URL in `css/fonts.css`.
2. If your app enforces a Content Security Policy, copy the exact hostname from the `src` URL in `css/fonts.css` and add it to `font-src`.