How do I load web fonts without hiding or shifting text?

A web font is part of the loading experience, not just the visual identity. Test when text becomes readable and whether its position changes as the font arrives. A fast-looking screenshot cannot reveal a slow or unstable first visit.

Measure the actual font request

Open Chrome developer tools and inspect Network on a fresh load. Identify the stylesheet and font requests, their sizes, start time and source. Compare a slow-network load with a warm repeat visit. Do not assume a declared font is used: inspect the rendered text and look for separate fallback files caused by missing characters.

Reduce the work before adding hints

1. Remove weights and families that no visible component uses.
2. Keep the script subsets needed for actual languages; do not remove Cyrillic from a Bulgarian page to improve a score.
3. Compare a variable file against the static styles you really need.
4. Choose and test fallback metrics so heading and paragraph changes do not move critical controls.
5. Evaluate font-display options against readable text and layout stability. Preload only a truly critical font after measuring the trade-off.

Should fonts be self-hosted?

Self-hosting can simplify external requests and delivery control, but requires the correct files, licence and update process. A third-party service can be appropriate in another setup. Compare the complete request chain rather than declaring one method universally faster. Keep font files cacheable with a versioned path and preserve the licence with distributed assets.

Acceptance checklist

Verify readable content before the preferred font arrives, no clipped accents, correct Bulgarian/English characters and stable button positions. Inspect mobile and desktop. Record lab measurements separately from field experience; one lab run is not proof that every visitor has good performance. See the font comparison workflow before changing an approved brand family.