Fonts
Choose typefaces, sizes, and weights.
Syntax
font-family: 'Segoe UI', Arial, sans-serif;Font properties control the typeface and its appearance:
font-family— a prioritized list ending in a generic family likesans-serif.font-size— the text size.font-weight— normal, bold, or 100–900.font-style— normal or italic.
The font shorthand can set several at once.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer loads a Google Font via @import and sets font-family on the body so it applies site-wide.
- A designer uses font-weight: 700 for headings and 400 for body text to establish a clear visual hierarchy.
- A developer defines a font stack with system fonts as fallbacks so text renders immediately while the web font loads.
More examples
Web font and fallback stack
Imports a Google Font and sets it on the body with a system-ui fallback chain for fast first render.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 1rem;
font-weight: 400;
}Font weight and style for hierarchy
Establishes a typographic scale using font-size, font-weight, and font-style to create clear content hierarchy.
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
h2 { font-size: 1.75rem; font-weight: 600; }
p { font-size: 1rem; font-weight: 400; line-height: 1.7; }
.caption { font-size: 0.8rem; font-style: italic; color: #666; }Custom @font-face declaration
Self-hosts a custom typeface using @font-face with font-display: swap to prevent invisible text during loading.
@font-face {
font-family: 'BrandFont';
src: url('fonts/brand.woff2') format('woff2'),
url('fonts/brand.woff') format('woff');
font-weight: 400;
font-display: swap;
}
body { font-family: 'BrandFont', sans-serif; }
Discussion