@font-face
Loads a font and gives it a name to use in `font-family`.
Syntax
@font-face { font-family: name; src: url(…); }Parameters
| Parameter | Type | Description |
|---|---|---|
| font-family | name | The name under which the font will be used. |
| src | url() | Where to get it: `url("/fonts/brand.woff2") format("woff2")` or `local("Name")`. |
| font-weight | font-style | descriptor | Which weight and style this file contains. |
| font-display | swap | What to show while loading; `swap` shows a fallback font at once. |
Examples
A font named "Brand" built here from fonts installed on the computer (on a real site src points to a .woff2 file):
<style>
@font-face {
font-family: "Brand";
src: local("Georgia"), local("Times New Roman");
font-display: swap;
}
.brand { font-family: "Brand", serif; font-size: 24px; }
</style>
<p class="brand">Text in the font named Brand</p>Notes
Use the woff2 format — it is the smallest and supported everywhere. Each weight and style is a separate @font-face with the same font-family. Fonts from another domain need permission (CORS) on that server.
See also
- font-family — The font family, with a list of fallbacks.
- url() — A reference to a file: an image, a font, a style sheet.
- font — A shorthand that sets the style, weight, size, line height and family of the font in one line.
- font-display — A descriptor of `@font-face` (not an ordinary property): decides what the text looks like while the web font is still loading.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.