The @font-face at-rule registers a custom font face for your page. You give it a family name and a source, then use that name with font-family.
Sources can be a file URL (url()) or a font installed on the device (local()). Prefer WOFF2 for downloaded fonts. Always keep a fallback stack so text stays readable if the file fails.
Standard CSS Fonts feature. Required descriptors: font-family and src. Optional helpers include font-weight, font-style, and font-display.
@font-face {
font-family: <family-name>;
src: <url> | <local> [, ...];
/* optional: font-weight, font-style, font-display, ... */
}List preferred sources first. Browsers try them in order.
| Descriptor | Description | Try it |
|---|---|---|
font-family | Required name used later in CSS | Try it |
src | Required local() and/or url() sources | Try it |
font-weight | Maps a file to a weight such as 400 or 700 | Try it |
font-style | Maps a file to normal or italic | Try it |
font-display | Loading behavior; swap is a common choice | Try it |
| apply with stack | Use the name plus fallbacks in font-family | Try it |
@font-faceRegister the face, then apply the family name.
@font-face block with font-family and src.url("font.woff2") format("woff2") for web delivery (demos below use local() so they work offline).font-weight, font-style, and font-display: swap.font-family, with system fallbacks after it.| Piece | Required? | Role |
|---|---|---|
font-family descriptor | Yes | Name you will reference later |
src | Yes | Where the font data comes from |
font-family property | Yes | Applies the face to elements |
| Fallback fonts | Strongly recommended | Keeps text readable if loading fails |
This demo registers a study family with local() (no download). Switch the applied family and compare the look.
Each snippet focuses on @font-face. Live demos use local() so they work without font files. Production sites usually use url(...woff2).
Register a name, then apply it with a fallback stack.
@font-face {
font-family: "StudySerif";
src: local("Georgia");
}
h1 {
font-family: "StudySerif", Georgia, serif;
}font-family: "StudySerif" is the public name.local("Georgia") uses an installed font for this demo.font-family.Georgia, serif cover missing faces.local() then url()Try a local font first; download WOFF2 if needed.
@font-face {
font-family: "BrandSans";
src:
local("Segoe UI"),
local("Helvetica Neue"),
url("/fonts/brand-sans.woff2") format("woff2");
font-display: swap;
}
p {
font-family: "BrandSans", system-ui, sans-serif;
}src list from left to right.format("woff2") helps browsers skip unsupported files.font-display: swap keeps text visible while loading.One family name, two files mapped with font-weight.
@font-face {
font-family: "StudySans";
src: local("Arial");
font-weight: 400;
}
@font-face {
font-family: "StudySans";
src: local("Arial Bold"), local("Arial");
font-weight: 700;
}
h2 {
font-family: "StudySans", Arial, sans-serif;
font-weight: 700;
}"StudySans".font-weight: 400 and 700 pick the right face.font-weight: 700 selects the bold face.Most font bugs are naming, path, or missing-fallback issues.
font-family and srcWithout those two descriptors, the @font-face rule is invalid.
The string in @font-face and in font-family must match, including quotes and spelling.
A wrong path or CORS block means the browser falls back to the next font in the stack.
Use font-display: swap (or similar) so users see text while the file loads.
Only host fonts you are allowed to redistribute on the web.
@font-face is a browser CSS feature for loading font faces. Node.js, Deno, and Bun do not apply it as a layout API.
Supported in Chrome, Firefox, Safari, Edge, Opera, and Samsung Internet. WOFF2 is supported in all modern browsers.
Bottom line: Safe for modern sites with WOFF2. Prefer font-display: swap and always include fallbacks. Not a server runtime API.
font-family + src. Prefer WOFF2 for downloads.font-family property with fallbacks.font-display: swap keeps text visible while the font loads.One line: @font-face names a font source; font-family applies that name to your text.
Learn how to pull other stylesheets into your CSS file.
5 people found this page helpful