Font-family property
Last updated: 2026-09-13
font-family Font-family property
The font-family CSS property specifies a prioritized list of font family names and/or generic family names for an element. The browser uses the first available font in the list, walking down the chain when a font is missing.
| Category | |
|---|---|
| Initial Value | depends on user agent |
| Inherited | Yes |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
font-family: [ <family-name> | <generic-family> ]#;⚙️ Values
| Value | Type | Description |
|---|---|---|
<family-name> | Type | A specific font family name, e.g. 'Microsoft YaHei' |
<generic-family> | Keyword | A generic font family: serif, sans-serif, or monospace |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-family | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Font names containing spaces or special characters must be quoted, for example "Times New Roman".
Important： Always end the list with a generic family (serif, sans-serif, monospace) as a final fallback.
❓ FAQ
QWhich fonts should I use for a Chinese-language website in CSS?
AA common cross-platform fallback chain is "PingFang SC", "Microsoft YaHei", sans-serif; for English you can add Helvetica or Arial first. Microsoft YaHei is picked up on Windows and PingFang SC on macOS, with the generic sans-serif at the end guaranteeing the text still renders on any system.
QHow do I load a custom web font using the @font-face rule in CSS?
ADeclare the font first with @font-face, for example: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }, then include 'MyFont' in your font-family list. Prefer the woff2 format for smaller file sizes, and keep a generic family at the end of the list as a fallback.
QDoes the order of multiple font-family values in the list matter?
AYes. The browser checks the list from left to right and uses the first font that is installed; fonts later in the list are only used if earlier ones are unavailable. Order the list by preference, and end with a generic family (serif, sans-serif, monospace) as the ultimate fallback.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
