font
@font-face
Registers a custom font family from a downloadable source so it can be referenced by font-family. Descriptors control weight, style, unicode range, and how text renders while the font loads.
@font-face { font-family: <name>; src: url(<file>) format(<fmt>); }Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| font-family | The name authors use in font-family declarations |
| src | One or more url()/format() sources listed in fallback order |
| font-weight | Weight this file represents (or a range for variable fonts) |
| font-style | normal | italic | oblique — style this file represents |
| font-display | swap | fallback | optional | block | auto — controls FOUT vs FOIT |
| unicode-range | Restrict the font to certain code points for subsetting |
| font-stretch | Width axis or single width value for the file |
Examples
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}Register a variable font with a weight range and swap loading
@font-face {
font-family: 'Merriweather';
src: url('/fonts/merri.woff2') format('woff2');
font-weight: 700;
font-style: italic;
}Register a single italic bold face
@font-face {
font-family: 'BodyLatin';
src: url('/fonts/body-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}Load only the Latin subset to save bytes
body { font-family: 'Inter', system-ui, sans-serif; }Use the registered family with a sensible fallback stack
Gotcha
font-display: swap avoids invisible text but causes a visible font swap; optional gives the smoothest UX on slow connections. Always self-host or preload critical fonts to avoid render-blocking.
Related at-rules
@font-feature-values
Defines human-readable names for OpenType feature indices belonging to a specific font family, so authors can activate them via font-variant-alternates. It bridges obscure OpenType tag numbers to memorable identifiers.
@import
Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.
@media
Applies contained CSS rules only when the specified media query matches the user's device, viewport, or environment. It is the foundation of responsive design and print-specific styling.