How Do Web Fonts Work? Why Fonts Break and Why Licensing Matters

A beautiful typeface the designer carefully chose sometimes shows up as a plain default font on someone else’s screen. It’s clearly the same site, yet the letters appear in a different shape. Why does this happen, and how can you make a site show the same font on anyone’s screen?

In this post, I’ll unpack, without any code, how fonts appear on the screen on the web, why they sometimes break, and why fonts come with licenses too.

Fonts are installed differently on each computer #

Fonts often used to live on the viewer’s computer, not on the site. The old web only specified “show it in this font,” and pulled the actual font from whatever was on the viewer’s device.

The trouble is that different people have different fonts installed. If a font that’s on my computer isn’t on yours, the browser has no choice but to substitute a similar, different font. That’s why the shape the designer intended changes from person to person, and sometimes the text looks broken.

A web font sends the typeface along with it #

What emerged to solve this is the web font. The site sends down the font file too, so it looks the same even if the viewer’s computer doesn’t have that font. By now, nearly every site uses web fonts.

By analogy: where the old way only asked “please read this in Gulim,” and that was that if the other side didn’t have Gulim, a web font encloses the typeface itself in the letter. So it appears exactly as the designer chose on anyone’s screen.

A web font is, in the end, a download #

Sending the typeface along also means there are more files to download. Font files are heavier than you’d think, so during the brief moment they load, text may go invisible for an instant, or appear in a default font and then flicker as it switches. That’s where the experience of letters taking shape a beat late when you open a page comes from.

So delivering web fonts fast matters. The CDN and cache covered earlier come into play again here. If you keep the font file somewhere nearby and cache a font once received so it isn’t fetched again, then from the second visit the letters take their proper shape right away. Korean fonts especially have a huge number of characters, making the files far heavier, so this optimization matters even more.

Fonts have licenses too #

A font is a genuine creative work that someone designed. So you can’t just use it freely; you have to hold a license appropriate to the use. Using a font as a web font in particular often requires separate permission, so a font you’re allowed to use in print sometimes isn’t allowed on the web.

It’s not rare to be billed later for a font you used without thinking. Fortunately, there are also many open-source fonts published for anyone to use freely. The fonts Google provides for free are a prime example. As with the open-source licenses covered earlier, it’s safest to build the habit of checking the permitted scope once before using a font.

So, to keep fonts from breaking #

The core is two things: provide the font you want to show as a web font, and specify a fallback font in advance in case it isn’t received. Then, even if the web font loads late, the text doesn’t break and holds steady in a similar font.

Add to that trimming the font file to be light and delivering it fast over a CDN, and you can have both a good-looking font and a fast-loading page.

Why this makes work easier for non-developers #

• You understand font mishaps. Knowing why the same site looks different on different devices or why text appears late, you can report the problem precisely.
• You know the licensing risk. Knowing that fonts have a scope of use too, you’ll check the permitted scope first when using a font in a design.
• You weigh performance too. Knowing that Korean web fonts are heavy, you can balance screen speed without piling on too many fonts.

Wrapping up #

Today we looked at how a web font sends the font file along so it looks the same on anyone’s screen, how the cost is more downloading that calls for a CDN and cache, and how fonts come with licenses too. The key is that a font has to be sent to be seen, and it’s a creative work you can’t use carelessly.

If you’re curious about the big picture of the licenses fonts carry, read MIT vs. GPL vs. Apache: Open-Source Licenses Made Simple; if you’re curious about the CDN and cache that deliver web fonts fast, read Cache and CDN — What “Try Clearing Your Cache” Really Means.