Web Fonts Explained: Formats, Loading, and How to Choose Them

A web font is a font file served from a server and loaded by a browser to render text on a website, rather than relying on fonts already installed on the visitor's device. You need web fonts when you want consistent typography across all visitors regardless of their operating system. You need to handle two things correctly: the file format you serve and the licensing that permits web use. Desktop fonts and web fonts are often the same typeface sold under different licenses, so a font you installed locally is not automatically licensed for your site.

Web Fonts vs. Desktop Fonts

The typeface may be identical; the license and delivery method are not.

A common mistake is uploading a desktop TTF to a website. It may render, but it usually violates the desktop license. Buy or use a web license for anything served to visitors.

Common Web Font Formats

• WOFF2 — Best choice today. Compressed, widely supported by modern browsers. Serve this first.
• WOFF — Older compressed format. Useful as a fallback for legacy browsers.
• TTF / OTF — Uncompressed. Larger files, slower loads. Sometimes used when a foundry only provides these, but WOFF2 is preferred for performance.

In practice you serve WOFF2 and let the browser use it; you rarely need to hand-write all formats if you use a hosted service.

How Web Fonts Load

Two mechanisms:

1. Self-hosted via @font-face — You upload the font files to your server and declare them in CSS.

@font-face {
  font-family: "MyWebFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
}
body { font-family: "MyWebFont", sans-serif; }

• src points to the file; the browser downloads it only if the font is used.
• font-display: swap tells the browser to show fallback text immediately and swap in the web font when ready. This avoids invisible text.

2. Hosted service — A third party serves the font and gives you a link or CSS snippet. Easier to set up, but you depend on an external request and must check the service's licensing terms.

Avoiding Layout Shift and Slow Rendering

• Use font-display: swap (or optional) to prevent FOIT (flash of invisible text).
• Preload the most important font file so it starts downloading early.
• Subset the font to only the characters you need, which shrinks the file.
• Limit the number of weights and styles; each one is a separate download.

How to Choose a Web Font

• Readability — Check x-height, letter spacing, and how it looks at small sizes on screens, not just in a specimen.
• Performance — Fewer weights and a subset character set load faster. A single well-chosen family often beats three.
• Brand fit — Match tone (serif for editorial, geometric sans for tech, etc.) and confirm the license covers your traffic and domains.
• Fallbacks — Always define a system fallback stack so text renders even if the font fails to load.

Common Problems

• Font not rendering — Wrong file path, missing format(), or a CORS issue when the font is served from another domain.
• FOUT / FOIT — Text flashes in a fallback font or stays invisible. Fix with font-display and preloading.
• Cross-browser fallbacks — Older browsers may not support WOFF2; provide WOFF if you must support them.
• Licensing surprises — A font that is free for desktop use may require payment for web use, or cap monthly pageviews.

Where to Start

If you are buying, check the web license terms (domains, pageviews, allowed formats) before you pay. If you are deploying, serve WOFF2, set font-display: swap, preload your primary font, and keep the number of families and weights small.