CSS Font Family
What is Font Family in CSS?
Font-family property is applied to ensure that the appearance of text is right or the font type is selected.
This feature is to keep you in-charge of picking the proper font which will be the default application font or a list of default fonts to use for text content.
Single Font:
Specifies a single font for the text.
body {
font-family: "Arial", sans-serif;
}
Using this, we will establish the font to entire document as Arial type. Ariel is this particular typeface where if Ariel is not available, the browser falls back to a serif font.
Multiple Fonts:
You can specify multiple fonts as a comma-separated list. The browser will use the first available font in the list.
h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
In this example, it tries to use "Helvetica Neue", and if that's not available, it falls back to Helvetica, Arial, and finally a generic sans-serif font.
Generic Font Families:
If none of the specified fonts are available, you can use generic font families as a last resort.
p {
font-family: Georgia, "Times New Roman", Times, serif;
}
Here, it tries to use a serif font like Georgia, and if that's not available, it falls back to "Times New Roman", Times, and finally a generic serif font.
Web Safe Fonts:
You can use fonts that are commonly available across different platforms without the need for external resources.
body {
font-family: "Helvetica", "Arial", sans-serif;
}
This example uses web-safe fonts that are likely to be available on most devices.