FNJ

Framer Custom Fonts: What Survives Export and What Doesn't

Framer loads most fonts from its own CDN. Here's what happens to font rendering after export, and how to self-host fonts correctly.

PublishedJuly 17, 2026
Read time2 min
Written byThe Framer → Next.js team
All posts ↗

Font handling is one of the more mechanical parts of a Framer export, but getting it wrong shows up immediately and visibly — text rendering in a fallback system font instead of your actual design.

Where Framer loads fonts from

Most Framer sites reference fonts hosted on Framer's own CDN (or, for Google Fonts specifically, Google's CDN directly) rather than bundling font files into the page itself. That works fine while you're on Framer's hosting — the references resolve correctly — but a runtime-stripped export needs to handle those references deliberately, or you end up with @font-face rules pointing at URLs that either don't work outside Framer's context or add an unnecessary external dependency you were trying to remove in the first place.

What a correct export does

Self-hosts the actual font files. That means downloading each referenced font (respecting the license — most fonts used on Framer are either open licenses like Google Fonts or ones you've legitimately licensed for your project), placing them alongside your exported assets, and rewriting the @font-face src URLs to point at your own hosting instead of Framer's or Google's CDN.

Why self-hosting fonts matters beyond "no external dependency"

Performance. An external font CDN request means an extra DNS lookup and connection before that text can render — self-hosted fonts load from the same origin as everything else, which is measurably faster, especially on mobile networks.

Reliability. If Framer's CDN (or the specific font provider) ever has downtime, a self-hosted font isn't affected — one less external dependency in your critical rendering path.

Consistency. No risk of a font provider changing or deprecating a font URL months after your export, silently breaking typography on a site you're no longer actively maintaining in an editor.

How to check your own export

Open dev tools → Network tab, filter by font file types (woff2/woff/ttf), and reload your exported site. Every font request should be coming from your own domain. If you see requests going out to framerusercontent.com or an external font CDN, those weren't properly self-hosted — worth flagging to whatever tool produced the export, since it's a straightforward, mechanical fix once identified.

#framer#fonts#export#html#performance

Convert your Framer site next

Free, takes about a minute, and you can preview the result before deploying.

Convert free →
Up nextThe Best Framer to Next.js Converter Options in 2026, Compared Honestly

Ready to convert your website?

Paste your published Framer URL to generate a production-ready project in minutes.

Framer Custom Fonts: What Survives Export and What Doesn't — Framer → Next.js Optimizer