@font-faceBaseline · Widely available
The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 20, 2016. Widely available since Mar 20, 2019.
Browser support
DesktopChrome
1–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155Edge
12–13Not supported
14+Supportedsince Aug 2, 2016
Current: 154Firefox
1–38Not supported
39+Supportedsince Jul 2, 2015
Current: 157Safari
1–9.1Not supported
10+Supportedsince Sep 20, 2016
Current: 27MobileChrome Android
18–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155Firefox Android
4–38Not supported
39+Supportedsince Jul 2, 2015
Current: 157Safari iOS
1–9.3Not supported
10+Supportedsince Sep 13, 2016
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: CSSFontFaceRule.
Feature detection
JS · check before using
if ("CSSFontFaceRule" in globalThis) {
// CSSFontFaceRule is available
} else {
// load a polyfill or use a fallback
}Sub-features
Support for each part of the feature (15). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| CSSFontFaceRule | 1 | 12 | 3.5 | 3.1 | 18 | 4 | 2 |
| CSSFontFaceRule.style | 1 | 12 | 3.5 | 3.1 | 18 | 4 | 2 |
| @font-face | 1 | 12 | 3.5 | 3.1 | 18 | 4 | 2 |
| @font-face.OpenType_CBDT_CBLC | 66 | 79 | ✕ | ✕ | 66 | ✕ | ✕ |
| @font-face.OpenType_SBIX | 66 | 79 | ✕ | 9.1 | 66 | ✕ | 9.3 |
| @font-face.WOFF | 6 | 12 | 3.5 | 5.1 | 18 | 4 | 5 |
| @font-face.WOFF_2 | 36 | 14 | 39 | 10 | 36 | 39 | 10 |
| @font-face.font-family | 4 | 12 | 3.5 | 3.1 | 18 | 4 | 2 |
| @font-face.src | 4 | 12 | 3.5 | 3.1 | 18 | 4 | 2 |
| @font-face.src.drop_invalid_item | ✕ | ✕ | 109 | ✕ | ✕ | 109 | ✕ |
| @font-face.src.format_keyword | 108 | 108 | 105 | 4 | 108 | 105 | 5 |
| @font-face.src.format_variations | 66 | 17 | 62 | 11 | 66 | 62 | 11 |
| @font-face.src.tech_keyword | 108 | 108 | 107 | 17 | 108 | 107 | 17 |
| @font-face.unicode-range | 1 | 12 | 36 | 3.1 | 18 | 36 | 3 |
| <url> | 1 | 12 | 1 | 1 | 18 | 4 | 1 |