What are web fonts?

Web fonts: definition and meaning

In the past, websites could only use fonts that were available on every computer, such as Arial or Times. With web fonts, the browser loads the font file from the server through the CSS rule @font-face. This way a company's brand font looks the same on every device, whether Windows PC, iPhone, or Android tablet. The usual format is the compressed WOFF2, which all current browsers support.

Font files are part of the brand, but also part of the load time. Every additional font family and every extra style such as regular, bold, or italic costs data and delays rendering. Web fonts therefore affect design, performance, and data protection at the same time, and a lean selection pays off twice.

Data protection: hosting Google Fonts locally

If Google Fonts are loaded directly from Google's servers, the visitor's IP address is transmitted to Google. For this reason, the Munich Regional Court I (Landgericht München I) awarded a visitor €100 in damages in January 2022 (case no. 3 O 17493/20) because he had not consented. Since then, local hosting has been considered the safer route.

In that case, the font files sit on your own server, no data flows to third parties, and the font often loads faster because no additional connection is needed. The license of many Google Fonts allows this, for example the SIL Open Font License. For paid fonts, the license must cover web use and self-hosting. Your data protection advisor can clarify data protection questions in individual cases.

Real-world example: a dental practice

A dental practice has its website built by an agency. The theme loads two font families with six styles directly from Google. After the rework, only one font with two styles is loaded as WOFF2 from the practice's own server, reduced to the characters actually needed.

The page loads faster, no data goes to Google, and the privacy policy gets simpler because the reference to the font service can be dropped. The website's appearance stays unchanged; patients notice the difference only in the shorter load time.

What matters in imple­menta­tion

Common mistakes are invisible text during loading, too many styles, and loading from third-party servers without a legal basis. Nano Concepts integrates fonts locally and efficiently, adapts them to your corporate design, and checks that the license, loading behavior, and privacy policy fit together. Technically, the following matters:

• WOFF2 as the format, only the styles and characters needed (subsetting)
• font-display: swap so text appears immediately in a fallback font
• Preload the most important font
• Fallback font with similar metrics so the page does not jump when it swaps
• Consider variable fonts: several styles in one file
• Clarify the license and self-hosting up front