Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :