Lesson 07 / Typography

CSS - Working with Fonts

Time: 41 min
Type: Reading + Practice
Level: Beginner

Use fonts effectively in CSS, understand their design and performance impact, and apply best practices for selection and implementation.

Mark lesson complete

Teacher Notes / In-Class Use

Demo Live

Model the core workflow from the lesson using a small class example.
Connect the example back to the first goal: Understand web-safe fonts, system fonts, font stacks, and generic font families

Try In Class

Import a Google Font of your choice.
Have students make one visible change, save, refresh, and explain what changed.

Submit Or Check

Ask students to show the work in the browser, not only in the editor.
Have students commit their progress with a clear message when the checkpoint is stable.

Watch For

Students copying code without checking file paths, spelling, or capitalization.
Visual changes that work locally but break when the project is published.

Learning Goals

Understand web-safe fonts, system fonts, font stacks, and generic font families
Import custom fonts with @font-face and Google Fonts
Choose font formats and performance strategies that support readability and speed

Introduction

Fonts play a central role in web design. They influence how a website looks and feels, and affect how easily users can read your content.

In this lesson, you'll explore how to use fonts effectively in CSS, understand their impact on design and performance, and learn best practices for font selection and implementation.

Web-Safe Fonts and System Fonts

Key Point: Fonts vary across devices. Some are more likely to be present, but none are truly universal.

"Web-safe" fonts are just widely available fonts, not guaranteed to be present on every device.
System fonts are defaults from the operating system. Your site may appear differently on various platforms if these are used as fallbacks.

Using Font Stacks

The browser will try each font in order. If one is unavailable, it moves to the next. The generic family ensures a fallback display.

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

Generic Families

serif: with decorative strokes
sans-serif: without strokes, often cleaner
monospace: all characters take up the same space
cursive: handwriting-style
fantasy: decorative or stylized

Importing Custom Fonts with @font-face

font-display: swap helps pages load faster by showing fallback fonts until the custom font is ready.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Google Fonts Integration

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

Using the Google Font in CSS

Always include a fallback font.

body {
  font-family: 'Open Sans', sans-serif;
}

Font File Formats

.woff2: Best compression, most recommended
.woff: For older browsers
.ttf: Used on older Android devices
.eot: Obsolete, used for legacy Internet Explorer

Finding Fonts

Google Fonts: free and popular
Adobe Fonts: subscription-based
Font Squirrel: curated, often commercially licensed
DaFont: check usage rights carefully

Always check the license terms before using a font, even if it's free.

Styling with Fonts

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 2em;
}

p {
  font-family: 'Lora', serif;
  font-style: italic;
  line-height: 1.5;
}

Performance Tips

Use .woff2 when possible.
Only include needed font weights and styles.
Subset fonts to reduce file size.
Use font-display: swap to improve perceived load speed.

Accessibility Considerations

Choose legible fonts with strong contrast.
Use relative units like em or rem.
Use tools to check contrast ratios to ensure readability for all users.

body {
  font-size: 1rem;
}

p {
  font-size: 1.2rem;
}

Activity: Try It Yourself

Add the following to a practice HTML file:

Import a Google Font of your choice.
Create a font stack using that font and at least two fallbacks.
Style headings and paragraphs using different weights and styles.
Test how your page looks in different browsers or operating systems.

Checkpoint

Before moving on, make sure these feel true.

I can explain the main concept in my own words.
I can apply this lesson to my current project.
I can verify the result in the browser.
I can commit the change with a clear message.

Practice

Import a Google Font of your choice.
Create a font stack with at least two fallbacks.
Style headings and paragraphs with different weights and styles.
Test the page in different browsers or operating systems.