font-family
The font-family CSS property sets the desired font face for text, along with optional fallback font faces.
Overview
The font-family CSS property sets the desired font face for text, along with optional fallback font faces.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
cursive | 1 | 12 | 1 | 1 | 18 | 1 |
fangsong | 1 | 12 | 1 | 1 | 18 | 1 |
fantasy | 1 | 12 | 1 | 1 | 18 | 1 |
kai | 1 | 12 | 1 | 1 | 18 | 1 |
khmer-mul | 1 | 12 | 1 | 1 | 18 | 1 |
monospace | 1 | 12 | 1 | 1 | 18 | 1 |
nastaliq | 1 | 12 | 1 | 1 | 18 | 1 |
sans-serif | 1 | 12 | 1 | 1 | 18 | 1 |
serif | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names. | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Not supported on `option` elements. See bug 1536148.
Notes 1 item(s)
Implementation note
- Setting `font-family: initial` behaves like `font-family: inherit`. See bug 200709.
Notes 1 item(s)
Implementation note
- Setting `font-family: initial` behaves like `font-family: inherit`. See bug 200709.
Syntax
CSS
body {
font-family: "Noto Sans JP", "Hiragino Sans",
sans-serif;
}
code {
font-family: "Fira Code", monospace;
}Live demo
Use cases
Using font-family
The font-family CSS property sets the desired font face for text, along with optional fallback font faces.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features