Web Fonts

Web fonts are typefaces loaded by a browser from a server or CDN so that text renders in a chosen typeface rather than falling back to system defaults. They make brand typography possible on the web.

Category: Design (also: Web Development)

Author: Atomic Glue Editorial Team

## Definition

Web fonts are font files that a browser downloads and uses to render text with a specific typeface, rather than relying on the user's locally installed system fonts. Before web fonts, designers were limited to a handful of universally available system fonts (Arial, Times New Roman, Georgia). Services like Google Fonts, Adobe Fonts (Typekit), and self-hosted @font-face declarations changed that by enabling any typeface to be used on any website. Web fonts are typically served in WOFF2 (the modern, compressed standard) with WOFF or TTF fallbacks for older browsers. Performance, licensing, and rendering consistency are the three critical considerations when choosing a web font strategy.

## How Web Fonts Work

Web fonts work through the CSS @font-face rule, which tells the browser where to find a font file and how to use it. The browser downloads the file (or loads it from cache), then renders text using that typeface. Services like Google Fonts provide hosted files with a simple link tag. Self-hosted fonts give more control over performance and privacy but require managing multiple file formats. Font loading affects perceived performance, which is why strategies like font-display: swap (show fallback text immediately, swap to web font when loaded) are standard.

## Self-Hosted vs Cloud-Hosted Fonts

Cloud-hosted fonts (Google Fonts, Adobe Fonts, Bunny Fonts) are easy to implement and often free, but they introduce a third-party HTTP request and potential privacy implications for users (Google Fonts transmits user IP addresses). Self-hosted fonts eliminate the third-party request, load faster with proper caching, and give full control over file subsets. The tradeoff is more setup work and the responsibility of serving the font files efficiently. For production sites, self-hosting is increasingly recommended for performance and privacy.

## Performance Optimization

Web fonts can delay text rendering, causing Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT). Mitigation strategies include using the font-display CSS descriptor (swap, fallback, optional), subsetting fonts to include only the characters needed (typically Latin), preloading the font file with <link rel='preload'>, and using a single variable font file instead of multiple individual weights. A well-optimized font load adds negligible download time. A poorly managed one hurts both performance and user experience.

## Note

Prefer WOFF2 format. Add crossorigin attribute when self-hosting with preload. Always specify a fallback font stack in the font-family declaration.

## In code

/* Self-hosted web font */
@font-face {
  font-family: 'CustomType';
  src: url('/fonts/customtype.woff2') format('woff2'),
       url('/fonts/customtype.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Preload in HTML head */
<link rel="preload" href="/fonts/customtype.woff2" as="font" type="font/woff2" crossorigin>

/* Google Fonts via link tag */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

## Common questions

Q: Are Google Fonts free to use on commercial websites?

A: Yes, Google Fonts are licensed for commercial use under open-source licenses like SIL Open Font License or Apache License. Each font has its own license, so check the specific font page. Most popular fonts (Inter, Roboto, Open Sans, Lato) are fully open source.

Q: Do web fonts slow down my site?

A: They can if not implemented correctly. Unoptimized web fonts are one of the largest contributors to render-blocking resources. The fix is to subset fonts, use WOFF2, apply font-display: swap, preload critical fonts, and avoid loading more than one or two families. A properly optimized web font setup adds minimal overhead.

## Key takeaways

• Web fonts enable brand typography on the web by loading typeface files into the browser.
• WOFF2 is the modern standard format. Always provide fallback for legacy browsers.
• Self-hosting offers better performance and privacy than cloud-hosted alternatives.
• Font-display: swap prevents invisible text while fonts load.
• Subset fonts and use variable fonts to minimize download size.

## Related entries

• [Typography (Serif / Sans-Serif / Variable Font)](atomicglue.co/glossary/typography-serif-sans-serif-variable-font)
• [Visual Design](atomicglue.co/glossary/visual-design)

Last updated July 2026. Permalink: atomicglue.co/glossary/web-fonts