Your website's font costs more than it looks

A client emailed me in a panic. The font foundry had detected her website and charged a licensing difference: over 800 dollars, because traffic went past the cap she agreed to three years earlier. Nobody on the team knew there was a cap. The website font had become a bill.

This happens more than you think. The website font is one of those decisions that look purely aesthetic, made in five minutes by someone in Figma, and that later charge you interest on three fronts: money, speed and identity. Let me break down all three.

Why fonts are billed by pageview

A font is software. You do not buy it, you license it. And webfont licenses are usually sold by monthly pageview tier.

It works roughly like this:

• Desktop license: use it in Figma, Illustrator, PowerPoint. Cheap.
• Web license: serve it in the browser. Billed by traffic tier.
• App license: embed it in an application. Billed by number of installs.

The cruel detail is that these licenses are separate. The designer buys the desktop one, builds a beautiful layout, hands it over. The dev takes the file and uploads it to the site. Nobody bought the web license. Two years go by, the site grows, and the email arrives.

At the big foundries, a full family with a web license for medium traffic runs between 500 and 3,000 dollars. If you have a site, an app and print material, multiply it. For a company with solid revenue, that is noise. For an early stage SaaS, that is a month of infra.

Free fonts got genuinely good

Ten years ago, "free font" meant Arial or something from Google Fonts that screamed "template". That changed.

Nebula Sans is a good example of what exists today. It is a free sans-serif family with an open license, and it does not look free. It has the full weight range, works as a variable font (one file covers light through black, no need to load six files), and the drawing is neutral enough for interface work without being dull. Diacritic support is there, which already rules out half the options from abroad if you write in a language with accents.

It is not the only one. Inter, Geist, Public Sans, Instrument Sans, Söhne (that one is paid, but I mention it because people mix it up). The point is that the "I need to pay a lot to get decent typography" argument is dead.

An expensive font does not make the product good. The wrong font makes the product slow.

The weight nobody measures

Here is the part performance reports do not explain well.

A font family with four weights, in WOFF2, covering latin and latin-extended, comes out somewhere between 60 and 120 KB. Sounds like nothing. Except fonts block rendering. The browser downloads the CSS, finds out it needs the font, requests the font, and while it does not arrive the text stays invisible or flickers as it swaps shapes. That "the site loaded and the text jumped" effect has a name: it is the font arriving late and reflowing the layout.

That feeds straight into Cumulative Layout Shift, one of the metrics Google uses for ranking. And it feeds into user perception, which is the metric that matters more.

Three things that solve almost everything:

1. Host the font on your own domain. Loading from Google Fonts adds a connection to another server. Ever since browsers started partitioning the cache per site, the old "the user already has it cached from another site" argument is worth nothing.
2. Use a variable font. One file instead of four. Fewer requests, less weight.
3. Set up the fallback properly. font-display: swap plus a system font with similar metrics. The text shows up right away, and the swap is nearly invisible.

I did this on an e-commerce site last year. We went from three font files loaded off an external CDN to one local variable file. Largest Contentful Paint dropped from 2.8s to 1.6s. Just the font. Nothing else changed.

The part that really matters: does the site look like yours?

Now the uncomfortable part. If you use the same free font everybody uses, your site will look like everybody's.

There is a SaaS aesthetic that has become an inside joke among designers. Inter for the body, purple gradient, isometric illustration, "New" badge with a rounded border. Pretty? Sure. Memorable? No. If I swap the logo on three of those sites, nobody notices.

Typography is the cheapest thing there is for setting a brand apart. You do not need an exclusive custom-drawn font. You need a choice made with intent:

• A neutral sans for body text, because legibility is no place for creativity.
• A font with personality for headings. Could be a serif, a display, a grotesque with strange details. This is where the brand shows up.
• A consistent scale. Not six random sizes because each screen was made on a different day.

That two-font combination, one neutral and one with an opinion, covers 90% of cases and costs zero if you pick well among the free ones.

How to decide without turning it into a three month project

If you are building or rebuilding a product right now, here is the short path:

Start with reading. Open your real text, not "Lorem ipsum", in the candidate font. A paragraph from your FAQ, a pricing table, an error screen. If it is tiring to read, drop it.

Test the numbers. Plenty of SaaS products show values, dates, metrics. A font with variable-width numbers misaligns table columns. Look for tabular-nums support. It is a ten second detail that prevents a permanent visual bug.

Check the diacritics. Type "ação", "coração", "não", "português". I have seen premium foreign fonts with a tilde drawn any old way, almost glued to the letter.

Read the license before you download. If it is the SIL Open Font License, you are free: web, app, commercial product, no traffic cap. If it is a foundry license, find the pageview line and compare it to your Analytics. And store the license PDF somewhere your team can find it two years from now.

Decide within a week. Seriously. Font choice is one of those discussions that stretch on forever because everyone has an opinion and nobody has criteria. Set the criteria above, test three options, pick one, move on. You can change it later if it turns out wrong. It is a CSS variable.

What I would do in your place

If your site today loads a font from Google Fonts, runs with three or four weights, and nobody can say who picked that font or why, you have two hours of work ahead of you and a real gain waiting.

Download the font, host it on your domain, convert it to variable if a version exists, set up the fallback. Then open the more interesting conversation: does this font say anything about what your company is? If the answer is "no idea", you just found the difference between a site that works and a site that sticks with whoever visited it.

I make this kind of adjustment on client projects often, almost always alongside other performance and identity things that piled up. Want to talk about yours? Take a look at what I do.

A client emailed me in a panic: over 800 dollars in retroactive charges because of the website font.

The license had a pageview cap. Traffic grew, nobody on the team knew, and the typography turned into a bill.

A font is software. You do not buy it, you license it. And a designer buying the desktop license while the dev uploads the file to the server is the classic recipe for that email showing up two years later.

But the money is the smaller part. A badly loaded font blocks rendering, shifts the layout and drags down your Core Web Vitals. On an e-commerce site last year, I swapped three files from an external CDN for one local variable file: LCP dropped from 2.8s to 1.6s. Nothing else changed.

And there is the question almost nobody asks: does this font say anything about what your company is? If the answer is "no idea", your site probably looks like everyone else's.

I wrote the full walkthrough on the blog, including how to read the license before you download. Want a second look at your case? Reach out.

#Typography #WebPerformance #ProductDesign #CoreWebVitals #Branding