← Back to Chapters

CSS Fonts

? CSS Fonts

⚡ Quick Overview

The font properties in CSS control how text looks on a webpage: its typeface (family), size, weight, and style. Good font choices improve readability and overall design aesthetics.

  • Use font-family to choose fonts with proper fallbacks.
  • Use font-size, font-weight, and font-style to adjust the look.
  • Use the font shorthand to set multiple font-related properties in one line.

? Key Concepts

  • Font family – The actual font used (e.g., "Arial", "Georgia").
  • Fallback fonts – Backup fonts if the first font isn’t available (e.g., sans-serif).
  • Font size – Controls how big the text is (e.g., 16px, 1rem).
  • Font style – Normal, italic, or oblique.
  • Font weight – Thickness of the characters (e.g., 400, bold).
  • Shorthand font – One property to set style, variant, weight, size/line-height, and family.

? Syntax / Theory

The basic way to set a font for an element is using font-family with one or more fallbacks:

? View Code Example (Basic Syntax) 
/* Basic font-family with fallback fonts */
selector {
  font-family: "Font Name", fallback1, fallback2;
}

The font shorthand lets you define several font properties in one declaration:

? View Code Example (Shorthand) 
/* font: style variant weight size/line-height family */
.text-sample {
  font: italic small-caps 16px/1.5 "Georgia", serif;
}

? Code Examples

Here are some common font-related declarations you will use frequently:

? View Code Example (Practical Usage) 
/* Basic font family for paragraphs */
p {
  font-family: "Arial", sans-serif;
}
/* Larger, bold heading text */
h1 {
  font-size: 32px;
  font-weight: bold;
}
/* Using shorthand to set multiple font properties */
.highlight-text {
  font: italic small-caps 18px/1.6 "Georgia", serif;
}

? Live Output & Explanation

Example visual output:

This text uses the Georgia font, in italic, with a slightly larger size and relaxed line spacing.

In this example:

  • font-family: "Georgia", serif; chooses Georgia, then any serif font as fallback.
  • font-size: 18px; makes the text bigger than the default 16px.
  • font-style: italic; tilts the text to emphasize it.
  • line-height: 1.5; adds breathing space between lines for better readability.

? Font Properties

Some important font-related properties and sample values are listed below:

Property Description Example Value
font-family Sets the font type (with fallbacks). "Arial", sans-serif
font-size Sets the size of the font. 16px, 1em, 1rem
font-style Sets normal, italic, or oblique style. italic
font-weight Controls how thick or thin characters appear. normal, bold, 400, 700
font Shorthand to set style, variant, weight, size/line-height, and family. italic small-caps bold 16px/1.5 Arial, sans-serif

? Tips & Best Practices

  • Use web-safe fonts or import custom fonts using services like Google Fonts.
  • Always include fallback fonts in font-family (e.g., "Roboto", Arial, sans-serif).
  • Use relative units like em or rem for scalable, responsive text.
  • Pair fonts wisely: for example, a serif font for headings and a sans-serif font for body text.
  • Keep the number of different fonts small (usually 2–3) to maintain a clean, consistent design.

? Try It Yourself

  1. Create a paragraph and apply different font-family values. Observe how the mood of the text changes.
  2. Experiment with font-size, font-weight, and font-style on headings vs body text.
  3. Rewrite your CSS using the font shorthand to set style, weight, size, line-height, and family in a single line.
  4. Import a Google Font and use it for your main headings while keeping a system font for paragraphs.