Vertical Metrics Explained: hhea, typo, win, and USE_TYPO_METRICS
Why the same font can get a different line height on macOS and Windows: the three sets of vertical metrics, the USE_TYPO_METRICS flag, and what you can do in CSS.
Guides tagged font-face
Variable Fonts on the Web: Axes, font-weight Ranges, and font-variation-settings
How to load a variable font with @font-face, control its axes with normal CSS properties, and use font-variation-settings only where you need it.
- · Workflow
How to Self-Host Google Fonts: Download, Convert, and Write @font-face
Move a Google Font from the hosted API to your own server: download the files, convert them to WOFF2, write the @font-face rules, and remove the old links.
- · Workflow
How to Self-Host a Custom Font with @font-face
Serve your own font files: get a WOFF2, write one @font-face rule per style, set caching and CORS headers, and check that the right file loads.
font-display Explained: swap, optional, fallback, or block?
What each font-display value does while a web font loads, and how to pick one for body text, headings, and icons without hiding text or jolting the layout.
Reduce Layout Shift from Web Fonts with size-adjust and ascent-override
Why text jumps when a web font loads, and how size-adjust, ascent-override, descent-override, and line-gap-override make the fallback take up the same space.