Font licensing when you self-host a Framer site

When you move a Framer site to your own hosting, check each font's license, because your server, not Framer's, now delivers the files. Google Fonts are almost all under the SIL Open Font License (or a similar open license), which allows self-hosting and commercial use. Free fonts from other libraries, such as Fontshare, have their own licenses that you should read. Commercial fonts you bought or uploaded are the ones to check carefully: many webfont licenses are limited by domain, page views or a hosting method, and some don't allow serving the files yourself without a separate web license.

This post explains what changes when you self-host, how to find each font's license, and a checklist. It isn't legal advice; for anything unclear, ask the foundry or a lawyer. Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer.

What changes when you self-host?

On Framer, the fonts your site uses are served by Framer's infrastructure, Google's or another font service. After you convert the site to code and host it yourself, two things can change:

1. Where the files come from. A converted project can keep loading fonts from the original CDNs, or serve them from its own folder.
2. The domain and the publisher. The site might move to a new domain, and you, not Framer, are the one publishing the font files.

Licenses often care about both. A webfont license might be for "one domain", for "self-hosting on your web server", or "via our hosted service only".

What Deframer does with fonts

When you convert with Deframer, every font family gets its @font-face rules in src/styles/fonts/. The asset option decides where the files are:

A fallback stylesheet for fonts no component declares can still load from Google Fonts or Fontshare CSS either way. CDN or local assets covers the technical side in detail; this post is about the license side.

Note that keeping the CDN option doesn't remove the license question. You're still using the font on your site, possibly on a new domain, so the license still has to cover that use.

The three kinds of fonts on a Framer site

Google Fonts

The fonts in the Google Fonts library are published under open licenses, mostly the SIL Open Font License 1.1, with some under the Apache License. The OFL allows you to use, embed, self-host and redistribute the fonts, including commercially, with conditions mainly about not selling the fonts by themselves and about renaming modified versions. Each family's page on Google Fonts lists its license.

Self-hosting Google Fonts is common, and some sites prefer it for privacy reasons, because the visitor's browser doesn't contact Google's servers.

Fontshare and other free libraries

Framer's font picker also offers fonts from other sources, such as Fontshare. Free doesn't always mean open: these libraries publish their own license terms, which can differ from the OFL on points like redistribution. Look up the family on the library's site and read its license before you serve the files from your own server.

Fonts you uploaded

Custom fonts you uploaded to Framer came from somewhere: a foundry, a marketplace, a designer, or your company's brand kit. Uploading them to Framer didn't change their license. These are the fonts that most often need checking, because commercial webfont licenses vary a lot:

If your license only covers serving through a foundry's hosted service, switching to "Assets in the project" could put you outside it. If it covers self-hosting on a named domain, moving to a new domain may need a license update.

A checklist before launch

1. List every family. Open src/styles/fonts/ in the converted project; each family has its own stylesheet.
2. Find each source. Google Fonts, another library, or a file someone uploaded.
3. Find each license. The library's page, the purchase receipt, the brand guidelines or the foundry's EULA.
4. Check the use. Web use, your domain (or domains), your traffic, self-hosting allowed or not, who the licensee is.
5. Decide where files load from. Keep a CDN source where the license requires it; serve from your project where allowed and preferred.
6. Fix gaps. Buy or upgrade a web license, ask the foundry, or swap the font for an openly licensed one with similar metrics.
7. Keep the records with the project, for example a FONTS.md note listing each family, its license and where its proof is kept.

Swapping a font you can't license

If a font's license doesn't cover your new setup and upgrading it isn't worth it, replace it. In a converted project, that means:

1. Add the new font's files (or its stylesheet) and an @font-face rule in src/styles/fonts/.
2. Point the text styles and components that used the old family to the new one; search the project for the old family name.
3. Check headings and buttons at every breakpoint, because a different font's widths can change line breaks. Fixing layout differences covers font-related layout shifts.

Choose a replacement with similar proportions to keep layouts close.

Agencies: who holds the license?

If you're moving a client's site, sort out font licenses as part of the handover. A font your agency licensed for the Framer build may not be licensed to the client for self-hosting. List the fonts in the handover document and agree who buys any missing license. When a client asks for their Framer code and the agency workflow cover the rest of the handover.