FNJ

Self-Hosting Framer Fonts: Why It Matters and What Actually Changes

Framer serves your fonts from its own CDN — which costs you a connection, some control, and a bit of speed. Here's what self-hosting them during conversion changes, and the one tradeoff to know.

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

Fonts are one of the quieter performance costs on a Framer site, because the cost isn't in the fonts themselves — it's in how they're delivered. Understanding what changes when a conversion self-hosts them explains a real, if modest, speed win.

How Framer serves fonts

A published Framer site loads its fonts from Framer's font CDN (and sometimes Google's). That means the browser has to open a connection to a separate domain, resolve its DNS, negotiate TLS, and only then start downloading the font files — all before any text in that font can render. Each additional origin a page depends on adds this fixed round-trip cost, and fonts are render-blocking-adjacent: text using them can't paint until they arrive.

What self-hosting changes

When a conversion downloads every font file and serves it from your own domain alongside the rest of the site, that separate-origin round trip disappears. The fonts come from the same connection already open to load the page — no extra DNS lookup, no extra TLS handshake, no dependency on a third-party CDN staying fast and available. On a site with several font weights, that's a real reduction in the critical path to first meaningful paint.

The font-display win that comes with it

Self-hosting also puts font loading behavior under your control. A converted site can force font-display: swap on every @font-face rule, which tells the browser to render text immediately in a fallback font and swap in the real one when it loads — instead of leaving text invisible while the font downloads (the dreaded "flash of invisible text"). That's a direct Core Web Vitals and perceived-speed improvement, and it's only reliably possible once you own the font declarations.

The one tradeoff

Self-hosting fonts means the font files now live in your deployment instead of being fetched from a shared CDN, so your own bundle is slightly larger and you don't benefit from any cross-site cache a shared CDN might theoretically provide. In practice, cross-site font caching has been largely eliminated by browsers for privacy reasons anyway (caches are now partitioned per-site), so the shared-CDN advantage is mostly theoretical today — while the extra-origin cost is real on every first visit. For most sites, self-hosting is the clear win.

What our converter does

Both conversion modes self-host and re-encode assets during the pass — fonts included — and force font-display: swap on every face, while stripping the now-unnecessary preconnect hints to Framer's and Google's font origins. You can see the before/after effect on your own site's load behavior with the PageSpeed comparison tool, or read how the rest of the optimization pass works on the Pure Next.js export page.

#framer#fonts#performance#self-hosting#technical

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.

Self-Hosting Framer Fonts: Why It Matters and What Actually Changes — Framer → Next.js Optimizer