Fonts in CSS
? Fonts in CSS
The font properties in CSS let you control the typography of text — including font family, size, weight, style, and more.
Key Font-Related Properties
| Property | Description | Example |
|---|---|---|
font-family | Specifies the font or font stack to use | font-family: Arial, sans-serif; |
font-size | Controls the size of the font | font-size: 16px; or 1.2rem |
font-weight | Sets the thickness (boldness) of the font | font-weight: normal; or bold; or 400, 700 |
font-style | Italicize or oblique text | font-style: normal;, italic;, oblique; |
font-variant | Controls small caps and other typographic variants | font-variant: small-caps; |
line-height | Sets the height between lines of text | line-height: 1.5; |
letter-spacing | Controls spacing between letters | letter-spacing: 0.05em; |
word-spacing | Controls spacing between words | word-spacing: 0.1em; |
Using font-family
You can specify multiple fonts as a fallback stack, in case the first font isn’t available:
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}Example: Styling Text
h1 { font-family: 'Georgia', serif; font-size: 2.5rem; font-weight: 700; font-style: italic; line-height: 1.2; letter-spacing: 0.05em;}Web Fonts (Google Fonts)
You can use external fonts by linking them in HTML or importing via CSS:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">body { font-family: 'Roboto', sans-serif;}Shorthand font Property
You can use the shorthand to set multiple font properties at once:
p { font: italic small-caps bold 16px/1.5 "Arial", sans-serif;}Order: font-style font-variant font-weight font-size/line-height font-family
If you want, I can help you pick and apply fonts, or show examples of combining font properties!
