font-family

Font rules can be given to text objects or their containers.

Fonts are often given a list, so that if a font is not available then another can be used.

If a font name has a space, then it must be enclosed in either quotation marks or apostrophes.

1
2
3
p {
  font-family: "Times New Roman", Times, serif;
}

Google Fonts

There are 10 web safe fonts.

Google Fonts has over 1000 fonts that are free to use. However, before you can use a Google font it has to be loaded in either an external or internal style sheet.

1
2
3
4
5
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
p {
    font-family: 'Roboto', sans-serif;
}

Spaces inside a font name needs to be replaced with a ‘+’ sign when it is loaded, but surrounded by quotation marks or apostrophes when it is used:

1
2
3
4
5
@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');
 
h1 {
    font-family: 'Sigmar One', cursive;
}

The Google Fonts page will give you necessary code to copy and paste – click on the @import option