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’.