Nowadays, most websites, these days, use custom web fonts. Unfortunately, not all browsers support custom fonts (different browsers support different font formats). Therefore, it is very important to always use fallback fonts.
To create the fallback fonts start with the font you want, and end with the generic family, to let the browser a pick similar font in the generic family if no other fonts are available.
Example:
The browser will try to use the font you defined first (Pacifico, in the example below), but if it doesn’t have that font available, it will keep going down that list (second Helvetica, or third choice Tahoma).
<!DOCTYPE html>
<html>
<head>
<style>
.fallback {
font-family: Pacifico, Helvetica, Tahoma, Sans-Serif;
}
</style>
</head>
<body>
<p class="fallback">This is a paragraph.</p>
</body>
</html>Output:
This is a paragraph.
Read also: