Syntax
font-family: name, fallback;
font-size: value;
font-weight: value;Examples
Setting a Font Stack
Specifying a preferred font with sensible fallbacks.
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Browser tries each font in order, falling back if one is unavailable */Weight and Style
Controlling boldness and italics.
h1 { font-weight: 700; } /* numeric weight, same as "bold" */
.emphasis { font-style: italic; }
.light { font-weight: 300; } /* requires the font file to include a light weight */The font Shorthand
Setting several font properties in one declaration.
.heading {
font: italic 700 24px/1.4 "Georgia", serif;
/* style weight size/line-height family */
}Parameters and values
- font-family (name list): Typeface, with comma-separated fallbacks
- font-size (length): Text size, commonly in rem for accessibility
- font-weight (number | keyword): Boldness, from 100 (thin) to 900 (black)
- font-style (normal | italic | oblique): Controls italic styling
Best practices
- Always include a generic fallback (sans-serif, serif, monospace) at the end of a font-family list, in case none of your preferred fonts load
- Use rem for font-size rather than px, so text properly scales if a user has changed their browser's default font size for accessibility
- Only load the specific font weights you actually use - loading all 9 weights when you only use 2 wastes bandwidth
- Use numeric font-weight values (400, 700) rather than just "normal"/"bold" when working with variable fonts or multiple weight options
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Text Properties
Beyond font selection, CSS offers properties to control text alignment, decoration, spacing, and casing. text-align positions text horizontally, text-decoration adds underlines/strikethroughs, text-transform changes casing, and letter-spacing/word-spacing adjust character and word gaps.line-height and Vertical Spacing
line-height controls the vertical space a line of text occupies, directly affecting readability. Unitless values (like 1.5) are generally preferred over fixed units, since they scale proportionally with font-size rather than creating an inconsistent fixed gap.List Styling
list-style controls how list markers (bullets or numbers) appear on <ul>/<ol> elements. list-style-type sets the marker style, list-style-position controls whether markers sit inside or outside the content box, and list-style: none is the standard way to remove markers entirely, commonly used when repurposing a list for navigation.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.
Beyond font selection, CSS offers properties to control text alignment, decoration, spacing, and casing. text-align positions text horizontally, text-decoration adds underlines/strikethroughs, text-transform changes casing, and letter-spacing/word-spacing adjust character and word gaps.line-height and Vertical Spacing
line-height controls the vertical space a line of text occupies, directly affecting readability. Unitless values (like 1.5) are generally preferred over fixed units, since they scale proportionally with font-size rather than creating an inconsistent fixed gap.List Styling
list-style controls how list markers (bullets or numbers) appear on <ul>/<ol> elements. list-style-type sets the marker style, list-style-position controls whether markers sit inside or outside the content box, and list-style: none is the standard way to remove markers entirely, commonly used when repurposing a list for navigation.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.