Introduction
Within CSS, the font-family property is used to specify the font of a text. Otherwise, browsers will display text using its default font.
See an example below,
body {
font-family: Verdana;
}
The example above shows that your body text will change to Verdana because the font-family property is assigned a value of Verdana.
One thing to point out, if a font-family name contains spaces, it should be within quotation marks.
See the example below,
p {
font-family: 'Trebuchet MS'
}
Moreover, the font-family CSS property lets you specify a list of font family names and generic names for the selected element.
A comma separates font values to suggest that they are alternatives.
p{
font-family: Arial, Helvetica, sans-serif;
}
Types of Generic Font Families
In the CSS space, there are five generic font families that we need to be familiar with,
Serif
Fonts have small strokes at the top and bottom of each letter. It also shows a sense of formality and elegance. Most widely used in print, like books or newspapers.
Sans-serif
Fonts have clean lines (don't have the strokes). It creates a modern and minimalistic look. Most widely used on the web and other liberal mediums such as magazines.
Monospace
These fonts are letters that have the same fixed width that results in a mechanical look.
Cursive
These fonts imitate human handwriting.
Fantasy
These fonts are decorative/playful fonts.
The difference between Serif Font and Sans Serif Fonts
Just remember that serif fonts are more professional-looking, while sans serif fonts look hippy and young.
![]()
Things to Remember
Default Fonts
When you assign or specify fonts, it's important to remember that users are unlikely to have the same fonts installed on your computer. If you have defined a font that the user doesn't have, your text will display according to the browser's default fonts, regardless of what you'd prefer.
Now how to avoid it? You can specify generic font names and let the users' system decide which font to apply.
For instance, if you want your paragraph to appear in a sans-serif font, you can use the style rule below,
p {
font-family: sans-serif;
}
Fallback Fonts
If you're looking for the fallbacks font, you'll see something like this,
p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Here, we've set that if 'Segeo UI' is available on the system, we use this font; otherwise, the browser tries to check if Tahoma is available; otherwise, the computer will look for Geneva, then Verdana.
If none of these fonts are available, the browser will use that system's default sans-serif font.
In other words, your browser will try to use the font you specified first, but if it doesn't found that font available, it will keep trying to go down that list.
Web Safe Fonts
Only a few fonts are considered safe, also known as "web-safe" fonts.
Meaning that it's likely most computers visiting your site can have that font installed; as a result, the browser can use it.
Here are some fonts that you can feel reasonably confident using.
Windows - Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, Comic Sans, Verdana, Georgia, Garamond.
Mac - Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva, Baskerville, Andale Mono.
Summary
I hope you have enjoyed this small blog post that discusses the font-family property of CSS.
We have shown you how we can set the font-family property, and we have even discussed the generic font types and the following: default fonts, fallback fonts, and web-safe fonts.
Once again, I hope you have enjoyed this article/tutorial as I have enjoyed writing it.
Stay tuned for more. Until next time, happy programming!
Please don't forget to bookmark, like, and comment. Cheers! And Thank you!
References
- http://web.mit.edu/jmorzins/www/fonts.html
- https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/
- https://www.w3schools.com/css/css_font.asp