CSS Web Safe Fonts

Last Updated : 25 Oct, 2020

There are a variety of fonts available in CSS and one can use any type of font in their stylesheets. However, all fonts may not be supported by the browser or operating system of the user. To overcome this problem, a fallback system with web safe fonts are used to ensure maximum compatibility.

We assign several font names to the "font-family" property. We start by specifying the font that is needed first and ends with a generic font family. Thus, incompatibility arises with the first font, it keeps trying the next font that can be displayed, ultimately ending with a generic font that can be reliably displayed across the majority of the browsers.

Syntax:

CSS element {
    font-family: font details
}

Example 1: In this example, the use of web safe fonts is shown.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        p.welcome {
            font-family: Georgia, serif;
        }

        p.hello {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <h1>The font-family Property</h1>
    <p class="welcome">
        Welcome to GeeksforGeeks
    </p>

    <p class="hello">
        Hello from GeeksforGeeks
    </p>
</body>

</html>

Output:

Example 2: In this example, the fallback mechanism is demonstrated.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        p.known-font {
            font-family: Courier, monospace;
            font-size: 16px;
        }

        p.unknown-font {

            /* Intentionally specifying 
                an unknown font */
            font-family: "Unknown Font", monospace;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h1>Demonstrating the fallback property</h1>

    <p class="known-font">
        This is a known font.
    </p>

    <p class="unknown-font">
        This is an unknown font,
        causing fallback to monospace.
    </p>
</body>

</html>

Output:

Note: Most of the font families do not have noticeable changes and due to that one may not be able to differentiate between fonts. For example, even though Times New Roman and Times look exactly the same, the differences can be seen at larger font sizes, and they are negligible. Also, it is not guaranteed that both the fonts are supported by all the browsers.

There are many more font combinations to use in our web projects. Here are some commonly used font combinations: