CSS Fonts Family
font-family: With this property, we are just specifying the font of that text. It is basically the prioritized list of fonts, with one or more font names for the selected element. So, it is like we are providing some font names, with the first font having the highest priority, and the last one being a generic one, which is supported by all browsers.
Let’s have an example implementation for understanding the font-family property –
So, as you can see here, I have given a font named monospace to the heading h1. The output will look something like this –
Also, you can give several fonts together. This is because all browsers may not support all the fonts. So, you can give several font values to the property. The first is the font of your choice, and the last font in the list is the one that is generic, i.e supported by all browsers.
So, if the desired font is not available, the browser will have some choices to select the font of the text, and if no font is supported by the browser, then it will pick up the last font from the list, which is generic.
There are some generic fonts(The fonts that every browser supports) in CSS. These include serif fonts, sans-serif fonts, monospaced fonts, cursive, and Fantasy.
We will discuss all these fonts.
Keep in mind that if your font name is having spaces, you need to specify it inside the quotations. Let’s have an example for understanding this –
So, as you can see that the font name Courier New contains space, so it has to be written in the quotes. So, here, among all the fonts given in the list, the first one is one that we desire, and the last one is the generic one. So, here is the output-
As you can see, the heading is now being displayed in a different font, which is cursive. So, if you ever need to change the font of your text in the element, you can make use of the font-family property.
