Changing the font with CSS3

Go back to HTML and CSS Index

In this lesson, we will look at how to change the font in different ways, e.g. the size, the type and the decoration.

The font-size property

The font-size property is used to specify the size of the font.


There are different ways of changing the size of the font - one way is to use a px value:

p {
font-size: 14px;
3.30 | Setting the font size of paragraphs to 14px


This text is 14px

Note, however, that a px value does not scale. It is an absolute unit.


Another way to change the font-size - one that actually does scale - is to use em or rem:

p {
font-size: 1.2em;
3.31 | Setting the font size of paragraphs to 1.2em


This text is 1.2em

The font-family property

To change the font, you use the font-family property:

h1 {
font-family: Georgia, serif;
3.32 | The font-family property



If the name of the font consist of multiple words, you need to put it in quotation marks, like this:

h1 {
font-family: "Comic Sans MS", sans-serif;
3.33 | The font-family property


Comic Sans MS

Web safe fonts

Every device has its own preinstalled fonts - but not every device have the same fonts as the others. The fonts that are known as Web Safe Fonts are the ones that are preinstalled on all operating systems - from Windows to Mac to Linux, and so on.

Web Safe Fonts are often used as "fall back" fonts - meaning fonts that will be used, if the originally wanted font can't display. Here is a list of some web safe fonts:

  • Arial, sans-serif
  • Helvetica, sans-serif
  • "Times New Roman", serif
  • Times, serif
  • "Courier New", sans-serif
  • Courier, sans-serif
  • Verdana, sans-serif
  • Georgia, serif
  • Palatino, serif
  • "Trebuchet MS", sans-serif
  • "Arial Black", sans-serif
  • Impact, sans-serif

Serif vs sans serif

Serifs have feet while sans-serifs don't:

3.34 | Serifs and sans-serifs

You can read more about fonts here: w3schools

Assignment: Using fonts from external ressources

It is possible to use fonts from external ressource like Adobe fonts or Google fonts - but how?

We will now do an exploratory exercise where you - in small groups - will 1) find the information on how to include fonts from either Adobe or Google, 2) create a "How to" guide that you upload to Canvas and 3) next time, give a presentation of what you found out.