Text during a custom-font load needs an explicit display strategy
Aliases: font-display · webfont swap · loading-period type
What it is
A custom face lives on the network. Body copy lives on the device. In between, the interface has to choose: hide the letters and wait, paint in a fallback, or give up on this swap. A font loading display strategy is that choice written down. Left unwritten, browsers and systems each have a default, and the same product goes blank on one end and flashes a substitute on the other, as if nobody had designed the interval.
Why it happens
A font file is an extra resource; its arrival cannot be tied to first paint. The shaper still has to pick a table for every glyph while the file is missing. Only a few roads exist: block painting (invisible type for a while), paint immediately in a fallback, block briefly then swap, or time out and never swap so the layout does not jump. On the web those roads are the font-display buckets; natively they are “wait for the custom face / use the system face first.” Defaults vary by engine. They are not a product decision. Without an explicit strategy the mock shows only the success frame, and the seconds in between are left to the engine’s mood. Strategy should split by role: a wordmark can wait a little; a paragraph cannot.
Where it stops holding
Faces already installed locally, and system UI type, have no loading interval, so there is nothing to strategize. Packaged or bundled files turn loading into a disk read; latency is usually too short to see, except on first install. Icon fonts park semantics in private-use code points; the wrong strategy flashes tofu or garbage, and must not share a bucket with body copy. Print and PDF embed; they do not run this network timeline.
Applying it
- Write down, per role — wordmark, body, icon font — which loading-period road to take, and put it in the implementation. Do not only mock the success state.
- Open the first screen on a throttled network and note when type first appears and which face it is. If nobody could have predicted that result, the strategy is not set.
- Default body copy toward “visible first.” Only a short mark whose identity depends on that one face may go briefly invisible.
Related
- Same group: F4.15.2 A long invisible wait hurts more than painting a fallback first · F4.15.3 Metric mismatch between fallback and target shifts the layout after load · F4.15.4 When a webfont fails, a system face must catch — not a blank
- Nearby: F4.07 Typeface choice · F7.06 Motion covering latency
- Search terms:
font-display·FOIT·FOUT