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.

Mark your steps as done as you complete them.

done 5 points + GIF - Halloween Series

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.

done 30 points + GIF - Facts Series

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

done 30 points + GIF - Chistmas Series

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>

done 30 points + GIF - Reactions Series

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>

done 30 points + GIF - Dance Series

Join our club 😃

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