# Web fonts

URL: https://tnb-tech.com/en/glossary/web-fonts/

## What are web fonts?

Web fonts are font files a site sends to the browser so that text appears in the typeface chosen in the design, not in whatever fonts the visitor’s device has installed. Each style — regular, bold, italic — is usually a separate file, downloaded on the first visit. The more families and weights a design signs off, the more has to arrive before the text looks right.

**Example**

At design sign-off for a corporate site, three type families are approved, each in four styles: regular, italic, bold and bold italic. That is 3 × 4 = 12 files. At roughly 30 KB per WOFF2 file with Latin and Cyrillic, the site downloads 12 × 30 = 360 KB of fonts alone.

With two families in two styles each, it is 4 files and around 120 KB: the text looks almost the same, and the browser downloads a third as much. When a family is a variable font, all its weights come in a single file, which pays off when the design really uses many weights.

**Why it matters for a business**

Fonts are discovered late: the browser only learns about them from the CSS. Until they arrive, the text is either invisible (Chrome and Firefox hide it for up to three seconds) or shown in a fallback font and swapped later. Invisible text delays FCP and LCP; the swap can shift the layout and hurt CLS. Setting font-display: swap shows the text at once, and a fallback font with matched proportions makes the swap barely noticeable.

There is a legal side too. When fonts load from Google Fonts’ servers, every visitor’s browser sends its IP address to Google. In 2022 a regional court in Munich awarded a visitor €100 in damages over exactly this, reasoning that the site could have hosted the fonts itself, which the open licences of Google Fonts allow. Serving the files from your own server saves connections to two outside servers and settles the data question. Choosing the typeface is a design decision; this entry is only about how fonts load.

**What to ask**

- How many font files does the design load, and how many KB in total? Ask for the number before sign-off, not after launch.
- Are the fonts served from our own server or from Google Fonts?
- Do the files carry only the characters we use — Latin and Cyrillic, without Greek, Vietnamese and other scripts the site never shows?
- What is the font-display setting, and is the main font preloaded?
- Does the font licence cover use on a website, and at what traffic?The number of fonts and the way they load are part of our website speed optimisation work, alongside the images.

- Services: [Website speed optimisation](https://tnb-tech.com/en/services/website-speed-optimisation/)
- Glossary: https://tnb-tech.com/en/glossary/