· 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 guides
Practical guides to using fonts on the web: formats, CSS, loading, and performance.
- · Formats
WOFF2, WOFF, TTF, or OTF: Which Font Format Should You Use?
Use WOFF2 on websites and TTF or OTF on your computer. What each format is, what conversion keeps, and when WOFF still matters.
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.
How to Preload Web Fonts (and When You Should Not)
The exact preload tag for a web font, why it needs crossorigin, and the cases where preloading slows your page down instead of speeding it up.
- · Workflow
How to Check a Font File Before You Put It on Your Website
A pre-launch checklist for font files: format and size, name and weight, version, the characters your content needs, and the license notes inside the file.
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.