Text and typography / @font-face
How to embed a custom font in a PDF
@font-face declares a font and where to fetch it. The fetched font is embedded in the output, so the document renders identically for a reader who has never had the font installed.
What it is for
Embedding is the whole reason a PDF looks the same everywhere. It is also why the src has to point somewhere the renderer can actually reach, which is where this usually goes wrong.
Support: Works everywhere
Works everywhere. The failure mode is not lack of support, it is that the URL does not resolve and the fallback is used silently.
The syntax
Written the way it would appear in a document stylesheet, using @font-face as intended.
@font-face {
font-family: "Brand Sans";
/* Absolute and public. A relative path resolves against nothing here. */
src: url("https://assets.example.com/fonts/brand-sans-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
/* block: wait for the font rather than paginating with fallback metrics. */
font-display: block;
}
.document {
font-family: "Brand Sans", Arial, sans-serif;
}The mistake people make
A relative URL, or a font served from behind your application's authentication. Both produce a silent fallback, and the only visible symptom is that line breaks differ from the browser preview.
Frequently asked
Does @font-face work when generating a PDF?
Works everywhere. Works everywhere. The failure mode is not lack of support, it is that the URL does not resolve and the fallback is used silently.
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.
Which font-display value should a PDF use
font-display. 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.