Topic Progress:

Font Family: A specific font

Generic Family: A collection of font families that look similar to each other

Generic Family Font Family Description
Monospace “Courier New” All characters have the same width
Serif “Times New Roman”
Some characters have lines on the ends
Sans-serif Arial Characters do not have lines at the end

In the following example we will change the font of the some <p> tags. If you look at the CSS you will see we have used the property font-family and given it more than one value. The first two values are font families and the last value is a generic family.

Remember to go to files and have a look at the CSS and HTML file.

When you run your website in a browser (Chrome, Edge, Fire Fox) there is a chance that it won’t support a certain font family. If we run this example in Chrome, and it didn’t support Times New Roman, it would try Times. If neither of them are supported, it will choose a similar font from the generic family(serif). We provide multiple font families and a generic family as a ‘just in case’.


Not recently active