CSS Fonts: In-Depth Guide
Font Family
The font-family property defines the typeface for text. You
can specify a prioritized list of font names and generic family names.
This ensures your text is displayed in the best available font on the
user's system. Common generic families include
serif, sans-serif, monospace,
cursive, and fantasy.
- Always provide multiple fonts for better compatibility.
- Font names with spaces must be quoted.
- Generic family should always be last.
body {
font-family: 'Segoe UI', Arial, sans-serif;
}
.heading-serif {
font-family: 'Times New Roman', Times, serif;
}
.code-mono {
font-family: 'Fira Mono', 'Consolas', monospace;
}This is a sans-serif font-family demo.
This is a serif heading
This is monospace code text.
Font Size
The font-size property sets the size of the text. Use
relative units (em, rem, %) for
accessibility and responsiveness. Absolute units (px,
pt) are less flexible. You can also use keywords like
small, medium, large.
em: Relative to the font-size of the element.rem: Relative to the root element (html).%: Relative to the parent element's font-size.
.font-size-large {
font-size: 2.5rem;
}
.font-size-small {
font-size: 0.8em;
}
.font-size-keyword {
font-size: large;
}This is large text (2.5rem).
This is small text (0.8em).
This is large keyword text.
Font Weight
The font-weight property controls the thickness of the
text. It accepts keywords (normal, bold,
lighter, bolder) and numeric values
(100–900). Not all fonts support all weights.
- Use numeric values for precise control.
- Font weights may render differently across browsers and fonts.
.font-weight-bold {
font-weight: bold;
}
.font-weight-light {
font-weight: 300;
}
.font-weight-bolder {
font-weight: bolder;
}This is bold text.
This is light text (300).
This is bolder text.
Font Style
The font-style property is used for italicizing or slanting
text. Values: normal, italic,
oblique. Italic uses a designed italic font, while oblique
slants the normal font.
- Use
italicfor emphasis or citations. - Oblique is less common and may look similar to italic.
.font-style-italic {
font-style: italic;
}
.font-style-oblique {
font-style: oblique;
}This is italic text.
This is oblique text.
Font Variant
The font-variant property enables typographic features like
small-caps. Most common value: small-caps. Some fonts
support additional variants (e.g., oldstyle-nums, lining-nums).
- Small-caps displays lowercase letters as smaller uppercase letters.
- Font variants are useful for headings, acronyms, or stylistic emphasis.
.font-variant-smallcaps {
font-variant: small-caps;
}This is small-caps text.
@font-face Rule
The @font-face rule lets you use custom fonts by
specifying a font file. This increases design flexibility and
branding. You can host fonts yourself or use services like Google
Fonts.
- Always provide a fallback font-family.
- Use
font-display: swap;for better performance.
@font-face {
font-family: 'MyFont';
src: url('MyFont.woff2') format('woff2');
font-display: swap;
}
.custom-font-demo {
font-family: 'MyFont', Arial, sans-serif;
}This would use a custom font if available (demo only).
Fallback Fonts
Always provide fallback fonts in your font-family list to
ensure text remains readable if a preferred font fails to load. This is
essential for accessibility and cross-platform consistency.
- List fonts in order of preference.
- End with a generic family.
body {
font-family: 'Roboto', Arial, sans-serif;
}
.fallback-cursive {
font-family: 'Pacifico', cursive;
}This text will use Pacifico if available, otherwise a generic cursive font.