CSS Fonts

In this step-by-step lesson, you'll learn how to use CSS to set fonts for different text elements on a webpage. You'll understand how to set font family, use fallback fonts, adjust font weight, size, and style. Finally, you'll apply these skills in an exercise to code a paragraph of text with specific font properties.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction
2 Font Family
3 Fallback
4 Font Weight
5 Font Size
6 Font Style
7 Exercise
Quiz

1 - Introduction

Using CSS we can set the fonts to use for different pieces of text on a web page. The type of fonts that you use are important as it can affect how a website's visitors experience the website.

5 points

2 - Font Family

We use the font-family CSS property to set what font to use for a piece of text. The values we give to the property is the names of font family to use.

Here are some examples of commonly used font families:

Times New Roman
Georgia
Arial
Verdana
Courier New

<p style="font-family: Times New Roman;">Times New Roman</p>
<p style="font-family: Georgia;">Georgia</p>
<p style="font-family: Arial;">Arial</p>
<p style="font-family: Verdana;">Verdana</p>
<p style="font-family: Courier New;">Courier New</p>

What fonts can you use?
Web browsers (Chrome, Firefox, Internet Explorer etc.) come with some of the most commonly used fonts installed with the web browser. These are called web safe fonts.

30 points

3 - Fallback

Using the font-family CSS property you can specify "fallback" fonts to use if the first one is not available to use.

For example the following code will try and use the font "Lato" which is not a web safe font and will not be found by the browser. The browser will then try and use the fallback font "Courier New" instead.

<p style="font-family: Lato, Courier New;">Look at this text.</p>

You can specify multiple fallback fonts e.g. font-family: Lato, Tahoma, Verdana

30 points

4 - Font Weight

We use the font-weight CSS property to set the weight of the font. The values we can use for it are:

normal
bold
a numeric value between 1 and 1000, inclusive.

<p style="font-weight: normal;">normal</p>
<p style="font-weight: bold;">bold</p>
<p style="font-weight: 100;">100</p>
<p style="font-weight: 400;">400</p>
<p style="font-weight: 700;">700</p>

30 points

5 - Font Size

We use the font-size CSS property to specify what size the font should appear. Normally we specify the font-size in pixels.

<p style="font-size: 10px;">10px</p>
<p style="font-size: 20px;">20px</p>
<p style="font-size: 30px;">30px</p>
<p style="font-size: 40px;">40px</p>
<p style="font-size: 50px;">50px</p>

30 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

CSS Fonts

Live Class Feed

1 - Introduction

2 - Font Family

3 - Fallback

4 - Font Weight

5 - Font Size

Unlock the Full Learning Experience

Learning Points