@font-face
The CSS @font-face at-rule defines a font resource and descriptors that associate it with a font family and style.
CSS in Depth, Second Edition
The CSS @font-face at-rule defines a downloadable font resource and the descriptors that associate it with a font family and style.
- How it is used
- Defines downloadable web fonts for page typography and supports deliberate control over family, style, weight, character sets, and loading.
- How deep it goes
- Explains descriptors, variants, character-range optimization, and loading behavior, while deferring deeper web-font performance treatment.
- Examples
- Uses Roboto and Sansita definitions, separate light and bold variants, Google Fonts stylesheets, and downloadable WOFF2 resources.
- What you can do after
- Build custom-font CSS, register local or hosted resources, select matching variants, and manage fallback behavior during loading.
Web Design Playground, Second Edition
The CSS @font-face at-rule defines a font resource and the information a browser needs to load it.
- How it is used
- Defines web font resources so browsers can load consistent typography instead of depending on visitors’ installed system fonts.
- How deep it goes
- Explains the rule’s purpose, descriptors, hosting choices, licensing concern, and font formats through short working examples.
- Examples
- Uses Bree Serif with WOFF2 and WOFF files, and practices a Google Fonts Merriweather setup with a generic fallback.
- What you can do after
- Apply it via CSS by declaring a hosted font, supplying file formats, and assigning the font to page elements.
Read how Web Design Playground, Second Edition explains @font-face →
Web Design Playground
A CSS at-rule that defines a downloadable font face for use in a document.
- How it is used
- Positions @font-face as the CSS directive that makes hosted web fonts more predictable than system fonts.
- How deep it goes
- Shows a declaration template with font-family, src, WOFF2, WOFF, and relative or root URL paths.
- Examples
- Uses Merriweather through Google Fonts and a two-format self-hosted @font-face rule.
- What you can do after
- Operate/configure it by naming a font family and pointing src at hosted WOFF2 or WOFF files.
Tiny CSS Projects
@font-face is a CSS at-rule that defines a font resource and its loading and typographic characteristics.
- How it is used
- Defines imported web fonts and controls their available styles, weights, sources, and loading behavior.
- How deep it goes
- Explains four descriptors, source fallback, variable weight ranges, font blocking, and stylesheet placement without deeper font internals.
- Examples
- Demonstrates normal and italic Open Sans using variable and static files, local lookup, WOFF2 sources, and a variable weight range.
- What you can do after
- Operate/configure custom web fonts with ordered sources, explicit formats, weight declarations, and non-blocking swap behavior.
Related concepts
- web fontused by · A web font is a font resource delivered through the web for rendering text in web pages or applications without requiring local installation.
- font-weightconfigures · Font weight is a typographic property specifying the relative thickness or visual heaviness of text glyphs, commonly through named or numeric values.
- browserconfigures · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.
- font-displayhas part · The CSS font-display descriptor controls how text is rendered while a web font loads or is unavailable.
- font-family propertyuses · The CSS font-family property specifies a preferred typeface or ordered sequence of fallback typefaces for rendering text.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.