Text and typography / font-display
Which font-display value should a PDF use
font-display controls what happens while a font is loading: swap shows fallback text immediately, block waits, optional gives up quickly.
What it is for
On a web page, swap is right, because showing text sooner matters more than showing it in the right font. In a document it is exactly wrong, because pagination happens once and there is no reflow afterwards.
Support: Works everywhere
Supported. The value that is correct for the web is the wrong one here, which is why this is worth its own entry.
The syntax
Written the way it would appear in a document stylesheet, using font-display as intended.
@font-face {
font-family: "Brand Sans";
src: url("https://assets.example.com/fonts/brand-sans-400.woff2") format("woff2");
/* Not swap. A document laid out with fallback metrics stays that way. */
font-display: block;
}The mistake people make
Copying the @font-face block from the web application, where swap was correct. The document then paginates against the fallback's character widths and every line breaks in the wrong place.
Frequently asked
Does font-display work when generating a PDF?
Works everywhere. Supported. The value that is correct for the web is the wrong one here, which is why this is worth its own entry.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to embed a custom font in a PDF
@font-face. Works everywhere.
How to use different fonts for different scripts in a PDF
unicode-range. Works everywhere.
How to align numbers in a PDF table column
font-variant-numeric. Works everywhere.
How to enable hyphenation in a PDF
hyphens. Works everywhere.
How to wrap long URLs and reference numbers in a PDF
overflow-wrap. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.