HTML CSS
Advanced
40 mins
Teacher/Student led
210 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

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

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.

    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

    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.

    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.

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

    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.

    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.

    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.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more