CSS · Chapter 13 of 44
CSS Fonts
Font properties control typeface, size, weight, and style. font-family sets the typeface, font-size the size, font-weight the boldness, and font-style italics.
It's good practice to provide a list of fallback fonts in font-family in case the preferred one isn't available.
Syntax
font-family: 'Font Name', fallback, generic-family;Font family and fallbacks
font-family: 'Helvetica', Arial, sans-serif; tries Helvetica first, then Arial, then any generic sans-serif font.
Size, weight, and style
font-size sets text size (px, em, rem). font-weight controls boldness (normal, bold, or 100-900). font-style sets italic or normal.
Example 1 (css)
body {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
}Output
Body text renders in Segoe UI (or a fallback) at 16px, normal weightFallback fonts ensure text still looks reasonable if the primary font isn't installed.
Key points
- font-family accepts a list with fallbacks.
- Always end a font stack with a generic family (serif, sans-serif).
- font-weight can be a keyword or a number (100-900).
- font-size can use px, em, rem, or % units.
💡 Note: Google Fonts is a popular free source for web fonts, loaded via <link> or @import.