Component Export

Fonts in DevLink exports

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

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

Font typeHow it loadsSetup required
Google FontsWebFont Loader, injected at runtime by <DevLinkProvider>None
Adobe FontsKit 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 CDNNone (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.

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

1

Open your Adobe Fonts account

Go to My Adobe Fonts → Web Projects.

2

Open your web project

Find the web project linked to this Webflow site.

3

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)
4

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
1@font-face {
2  font-family: 'Brand Sans';
3  src: url('https://<webflow-cdn>/.../brand-sans.woff2') format('woff2');
4  font-weight: 400;
5  font-style: normal;
6  font-display: swap;
7}

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 synced 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 sync to pick up the new URLs.

Troubleshooting

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, then re-deploy. No re-sync is needed.
  2. If your app enforces a Content Security Policy, verify it allows the Adobe Fonts CSP directives listed above.

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

Solutions:

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

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 sync 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.