How to choose fonts for a website in 2026: readability, speed, and Core Web Vitals

In short: choose a font by four criteria — readability, language support (Cyrillic + Latin), loading performance, and brand fit. In 2026 three technical requirements were added: self-host instead of loading from a third-party CDN (GDPR), the WOFF2 format + subsetting for weight, and font-display: swap with a metric-matched fallback so text does not jump and ruin Core Web Vitals.

A font affects more than visual style. It affects loading speed, CLS, readability, brand perception, and how quickly a user can make a decision on the page. A well-chosen font helps people read faster, absorb information better, and tires the eyes less. But in 2026 the font has a second job: it directly affects the technical metrics Google uses to evaluate a page.

Quick answer

Choose a font by four criteria: readability, language support, loading performance, and brand fit. A beautiful but heavy or hard-to-read font lowers UX. On top of that, in 2026 mind the engineering: self-host, WOFF2 + subsetting, font-display: swap, and a metric-matched fallback against CLS.

How to identify which fonts a site uses

The fastest way is the browser's built-in DevTools. Open the page, right-click the text, choose "Inspect", and find the font-family property — it lists every font, including fallbacks. For a visual report without code, extensions like WhatFontIs or WhatTheFont identify a font from a screenshot and show legal alternatives.

Selection criteria

Four selection principles

1. Simplicity and readability. Unusual and script fonts are harder to read; keep decorative ones for headings. Per WCAG 2.2: line-height of at least 1.5, line length of 45–80 characters, text-to-background contrast of at least 4.5:1, and a base body size from 16px (18px for low-vision audiences).

2. Font pairing. Usually you take a pair: one family for headings, one for body. The classic is sans-serif + serif. Fontpair helps you preview combinations.

3. Expressiveness and contrast. If you use two fonts, make them clearly contrasting — or stick to one family with different weights (ideally variable).

4. Correct rendering and technique. A font must render correctly across all browsers and OSes — and not slow loading. In 2026 that means file format, subsetting, and loading strategy.

Serif and sans-serif

Serif fonts have small strokes at the ends of letters (Times New Roman, Georgia, Source Serif). They feel traditional and solid and read well on high-resolution screens.

Sans-serif (grotesque) fonts have no serifs (Arial, Helvetica, Verdana, and modern ones like Inter, Roboto, Open Sans). They are the de facto standard for interfaces and content: clean, scalable, and crisp even at small sizes.

Nine practical rules

1. Do not use more than 1-2 families without a reason.
2. Limit the number of weights — regular and bold usually suffice.
3. Check Cyrillic and Ukrainian characters before implementation.
4. Avoid body text that is too thin.
5. Pair serif and sans-serif as a classic contrasting combination.
6. Do not use script fonts for body text.
7. Configure fallback so text does not jump.
8. Mind spacing: line-height for large blocks is 1.5.
9. Test: run an A/B test changing only the font.

The 2026 technique: speed, Core Web Vitals, and privacy

Self-host instead of a third-party CDN (GDPR). Loading fonts directly from a public CDN is legally risky in Europe: back in 2022 a Munich court fined a site owner for passing a visitor's IP address to a third party without consent (an IP is personal data under GDPR). The fix is to host the font on your own server.

WOFF2 format + subsetting. Use WOFF2 only (about 30% better compression than WOFF) and strip unused glyphs. A full font has 2,500+ glyphs while a page needs only Cyrillic + Latin — subsetting easily cuts a file from 90KB to 15–20KB. Target: under ~100KB of fonts and 2–4 files per page.

Variable fonts. If you need 3+ weights of one family, check for a variable version. One variable file replaces several static ones and cuts weight by 40–60%.

font-display: swap and fighting CLS (FOUT/FOIT). font-display: block hides text until the font loads (FOIT) — bad for UX and SEO. The right choice is swap (FOUT): text renders immediately in a system font. The swap "jump" hurts CLS (15–20% of all shifts per HTTP Archive), so add a metric-matched fallback via size-adjust, ascent-override, descent-override (tools: Fontaine, Capsize).

preload only critical fonts. Load the above-the-fold font via <link rel="preload"> to speed up LCP — but only 1–2 files, with the crossorigin attribute.

Licenses. Most popular web fonts ship under the open SIL Open Font License (OFL) and can be self-hosted for free. Paid fonts often need a separate web license. Close these questions during a technical audit.

For full page checks, use UNmiss, sem.chat for user questions, and SEOquick UX/CX services.

FAQ

How many fonts can a site use?

The optimum is 1–2 families. A third font almost always hurts both design and speed. Instead, use different weights of one (ideally variable) family.

Google Fonts or self-host?

In 2026 self-host is preferable: loading from a public CDN passes the visitor’s IP to a third party, which violates GDPR in the EU. Self-host is more compliant and usually faster.

How do fonts affect Core Web Vitals?

A heavy font slows LCP, and the text “jump” hurts CLS. Fix it with subsetting + WOFF2, preload of the critical file, and a metric-matched fallback + font-display: swap.

What are FOUT and FOIT?

FOIT — text is invisible while the font loads (font-display: block). FOUT — text shows immediately in a system font, then swaps (swap). FOUT is preferable, and its “jump” is removed by a metric-matched fallback.

Which font supports Cyrillic and Ukrainian characters well?

Inter, Roboto, Open Sans, PT Sans, and among serifs PT Serif and Source Serif. Always verify the Ukrainian letters and apostrophe before implementation.

What size and line spacing should body text use?

Per WCAG 2.2 — from 16px (18px for low-vision users), line-height of at least 1.5, line length of 45–80 characters, contrast of at least 4.5:1.

Sources

• web.dev: best practices for fonts
• W3C contrast minimum
• W3C text spacing