CSS Fonts

CSS Fonts

CSS font properties control how text is displayed on a web page. You can define font families, sizes, styles, and even load custom fonts from external sources.

Font Family

The font-family property specifies which font should be used. It is a good practice to define more than one font as a fallback.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Web Safe Fonts

Web safe fonts are fonts that are commonly available on most devices and operating systems.

• Arial
• Verdana
• Times New Roman
• Georgia
• Courier New

Using web safe fonts ensures consistent display across devices.

Font Fallbacks

If the first font is not available, the browser tries the next one in the list.

p {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

The browser uses the first available font from left to right.

Font Style

The font-style property is used to make text italic or normal.

.italic {
  font-style: italic;
}

.normal {
  font-style: normal;
}

Font Size

The font-size property controls the size of text. Relative units are recommended for better accessibility.

p {
  font-size: 16px;
}

h2 {
  font-size: 1.5rem;
}

Common units include px, em, and rem.

Google Fonts

Google Fonts allow you to use custom fonts by linking them from an external service.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

body {
  font-family: "Roboto", sans-serif;
}

Font Pairings

Font pairing means using different fonts for headings and body text to create visual contrast.

body {
  font-family: "Roboto", Arial, sans-serif;
}

h1, h2, h3 {
  font-family: "Georgia", serif;
}

Good font pairings improve readability and visual hierarchy.

Font Shorthand

The font shorthand property combines multiple font properties in one line.

p {
  font: italic 16px/1.6 Arial, sans-serif;
}

The order is important: style, size/line-height, and family.

Code Challenge

Goal: Improve typography using CSS font properties.

HTML:

<div class="article">
  <h2>CSS Fonts</h2>
  <p>Good typography improves readability and design.</p>
</div>

Task:

• Use a web safe font with fallbacks for the paragraph
• Use a different font for the heading
• Increase line height for better readability
• Use font shorthand for the paragraph

Try a Solution:

.article h2 {
  font-family: Georgia, "Times New Roman", serif;
}

.article p {
  font: 16px/1.7 Arial, Helvetica, sans-serif;
  color: #333;
}

What’s Next?

Next, you will learn how to work with icons using CSS.