Fonts
font-family
font-family chooses the font for text. List font names separated by commas, and the first one installed on the viewer's device is used.
Syntax
[ <family-name> | <generic-family> ]#Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
font-family: serif;
}Controls
font-familyserif
Font names to try first (comma-separated)
Generic family
About
Only fonts installed on the viewer's device can be used (unless you load a web font). So you list the fonts you want in order, and end with a generic family as the "anything in this style" fallback.
Writing the value
- Font names: wrap them in quotes, as in
"Hiragino Sans". Names without spaces work without quotes, but quoting is safer. - Generic families: keywords such as
serif(typefaces with decorative strokes),sans-serif(without them), andmonospace(fixed width). Each device picks a matching font. Do not quote them.
system-ui is the standard font of the operating system's interface. Families starting with ui-, such as ui-rounded, only apply where supported (mainly on Apple devices).
On Japanese pages, listing a Latin font first makes only the Latin letters use it, while Japanese text falls through to a later font.