How to @font-face descriptors: complete reference
- Step 1Required: src + font-family — src: comma-separated url() format() pairs. font-family: the CSS identifier. Both required for a valid @font-face block.
- Step 2Style descriptors: weight, style, stretch — font-weight: 100–900 or named (normal/bold). font-style: normal/italic/oblique. font-stretch: ultra-condensed through ultra-expanded.
- Step 3Performance descriptors: display, unicode-range — font-display: auto/block/swap/fallback/optional. unicode-range: U+XXXX-XXXX comma list defining the subset this font covers.
Frequently asked questions
What's font-feature-settings on @font-face?+
Sets default OpenType features for any element using this font-face. Less common than per-element font-feature-settings; useful for design tokens that bind features to specific font-family declarations.
Browser support for ascent-override?+
Chrome 87+, Firefox 89+, Safari 15.4+. Older browsers ignore the descriptor. Acceptable degradation: CLS during font swap on older browsers, smaller than on modern.
What about font-variation-settings on @font-face?+
Sets default axis values for variable fonts at this @font-face. Lets you bind a single variable WOFF2 to multiple discrete @font-face entries with different default weights — the Weight Presets Builder pattern.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.