Working with Fonts

Choosing the right font and font size is crucial for readability.

CSS provides several font properties to style text.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'Georgia', serif;
  font-size: 2em;
  font-weight: bold;
}

/* Font shorthand */
p {
  font: italic bold 14px/1.6 Arial, sans-serif;
}

font-family - Font name or family
font-size - Size of text (px, em, rem, %)
font-weight - Thickness (normal, bold, 100-900)
font-style - Normal, italic, oblique
font - Shorthand for all font properties

Try Fonts

<h1>Heading with Georgia Font</h1>
<p class="arial">Paragraph with Arial font</p>
<p class="courier">Paragraph with Courier font</p>

Note: Always specify fallback fonts in case the primary font isn't available.

CSS Fonts

Working with Fonts

Try Fonts