HTML CSS
Hard
20 mins
210 points
What you need:
  • Computer/laptop

CSS Fonts

In this lesson we learn how to use CSS to set what fonts to use for you text.

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.

Join our club 😃

To view the remaining 2 steps and access hundreds of other coding projects please login or create an account.

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