Performance
Font preload: five files, not twenty
Font preload serves only the first-screen characters: here 5 files for 171,368 bytes out of 20 declared faces. How to choose them and what to measure.
Key points
- Preload only the faces that appear without scrolling: here 5 of 20 declared.
- The five preloads weigh 171,368 bytes, measured on the home page on 1 November 2026.
- Without crossorigin the browser downloads the font twice and the preload does nothing.
Font preload belongs to the characters the first screen shows. Here that means 5 requests for 171,368 bytes, against 20 @font-face declarations in fonts.css.
The five preloaded files
| File | Role | Bytes | Preload |
|---|---|---|---|
inter-400-latin.woff2 | body text | 48,256 | yes |
averia-serif-libre-400-latin.woff2 | display serif | 38,404 | yes |
averia-serif-libre-700-latin.woff2 | display serif, bold | 38,712 | yes |
general-sans-500-s2.woff2 | hero display | 22,904 | yes |
general-sans-600-s3.woff2 | hero display, bold | 23,092 | yes |
The five files cover the text and headings visible at once. The sheet declares 20 faces because each family has several weights and subsets: the other 15 arrive only when a page really uses them, and cost nothing on a page that does not.
The correct markup
crossorigin is required even on the same origin: without it the browser downloads the font twice, once for the preload and once for the @font-face rule, and the preload stops helping.
The command
curl -sS -o /dev/null -w "%{size_download}\n" https://ui.eneawork.it/fonts/inter-400-latin.woff2The command prints the bytes of one file; repeat it for each preload and add them up. Compare the total with the rest of the first screen, not with the whole site.
The limitation
A wrong preload steals bandwidth from what matters: if a face never appears without scrolling, its 38 KB arrive before the useful text. WOFF2 files are already compressed, so gzip does not shrink them, and the immutable cache makes only the first visit pay.
Where to continue
In the EneUI catalogue: 111,985 components, 1,556 blocks and the record sidebar, where typography comes from the global sheet. The guides: font-display and layout shift and critical CSS; the comparison of free fonts for interfaces helps you choose before you measure.
Frequently asked questions
How many fonts should I preload?
Only the ones used above the fold, usually two or three. Every extra preload competes with the main content for the same bandwidth.
Why does a same-origin font need crossorigin?
Fonts are fetched in CORS mode even from the same host. Without the attribute the preload does not match the CSS request and the file is downloaded twice.
Preload or font-display swap?
They do different jobs. Preload cuts the time until the file arrives, font-display decides what to show while it is missing. Use both.
Does Brotli compress WOFF2 files?
No, the format is already compressed and a second pass adds a few bytes. The saving comes from the number of faces you serve, not from compression.
How do I check that the preload works?
In the Network panel the font should appear once, with high priority and no second request from the CSS. Two entries mean crossorigin is missing or the path does not match.