font-family
Picks a font, with a list of fallback fonts in case the first one is unavailable.
- Initial value
browser-dependent- Inherited
- Yes
- Animatable
- no
- Applies to
- all elements
- JavaScript
element.style.fontFamily = "Georgia, serif"
Example
#body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}<p style="font-family: system-ui, sans-serif; margin: 0 0 8px">Text in the system font.</p>
<p style="margin: 0">Code: <code style="font-family: ui-monospace, Menlo, monospace;">const points = 120</code></p>Definition and usage
#The font-family property takes a comma-separated list of fonts. The browser uses the first one that is available, so the list works like a backup plan: if the user does not have Georgia, they get the next one on the list.
Always end the list with a generic family: serif (serif), sans-serif (sans-serif), monospace (fixed-width characters), or system-ui (the operating system’s font). Wrap font names that contain spaces in quotes.
You load custom fonts, for example from Google Fonts, with an @font-face rule or a provider’s stylesheet, then reference their name in font-family. The property is inherited, so it’s usually set once, on the body element.
Syntax
#font-family: <font name> [, <font name>]* , <generic family>;Values
#- A sans-serif font, easy to read on screens.
- A serif font, associated with books and newspapers.
- Every character has the same width, like in a code editor.
- A specific font with a fallback family.
- A font that imitates handwriting. Its look depends heavily on the system.
Values in practice
#sans-serif
.demo { font-family: sans-serif; }serif
.demo { font-family: serif; }monospace
.demo { font-family: monospace; }Georgia, serif
.demo { font-family: Georgia, serif; }cursive
.demo { font-family: cursive; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Always end the list with a generic family, for example
sans-serif. Without it the browser might fall back to a serif font. - Every extra font file is an extra download. Limit the number of fonts and weights to the ones you actually use.
Related entries
#Spotted a mistake or missing an example? Write to us.