CSS font properties define the look and feel of the text on your website. Choosing the right font is crucial for readability and establishing a strong visual brand identity.
The font-family property specifies the font for an element. It should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems.
p {
font-family: "Times New Roman", Times, serif;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}| Generic Family | Description | Example |
|---|---|---|
| Serif | Fonts with small strokes at the edges. | Times New Roman |
| Sans-serif | Fonts without strokes (clean/modern). | Arial / Helvetica |
| Monospace | All characters have the same width. | Courier New |
The font-size property sets the size of the text. You can use absolute or relative units.
h1 { font-size: 40px; }
h2 { font-size: 2.5rem; }
p { font-size: 100%; }Control the slant and thickness of your text.
Mostly used to specify italic text.
p.normal { font-style: normal; }
p.italic { font-style: italic; }Specifies the weight (boldness) of a font.
p.thick { font-weight: bold; }
p.custom { font-weight: 900; } /* Heavy black weight */To shorten the code, you can use the font property to set multiple values at once.
/* font: style weight size/line-height family */
p {
font: italic bold 20px/1.5 "Inter", sans-serif;
}If you don't want to use standard web-safe fonts, you can use Google Fonts. Just link the font in the <head> and use it in your CSS.
<!-- In HTML Head -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit">
/* In CSS */
body {
font-family: 'Outfit', sans-serif;
}