Skip to content
Related Articles

Related Articles

What are web safe fonts and fallback fonts in CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Oct, 2021

Web Safe Fonts: Web Safe fonts are those fonts that are usually installed across all of the browsers and operating systems. Some examples of fonts that can be used as Web Safe Fonts are as follows.

  • Verdana
  • Georgia
  • Arial
  • Serif
  • Sans-Serif
  • Times New Roman
  • Candara
  • Calibri
  • Optima
  • Lucida Bright

Fallback Fonts: No font is 100% web-safe fonts. There is always a possibility that the font that you treat as a Web Safe font is not properly installed. In such a situation we use some fonts for backup and those fonts are called fallback fonts.

Some examples of fonts that are usually used as fallback fonts are as follows.

  • Cursive
  • Fantasy
  • Monospace
  • Qahiri

Note: All those fonts that are used as web-safe fonts can also be used as fallback fonts.

 

Syntax:

Selector {
  font-family: font-1, font-2, font-3;
}
  • font-1 will be our web-safe font.
  • font-2 and font-3 will be our fallback font.

You can add as many fallback fonts as you want.

Explanation: The font-1 will be shown but due to any reason font-1 is not available on any browser or operating system then in that case font-2 will be used. If font-2 is also not available then font 3 will be used and so on.

Example 1: The following code shows web-safe font for the “p” element.

HTML




<!DOCTYPE html>
<html>
    <head>
  
        <!-- Google Fonts -->
        <!--We used Google font. You can also download
            any font and then use it --->
          <link rel="preconnect"
                href="https://fonts.googleapis.com">
          <link rel="preconnect" 
                href="https://fonts.gstatic.com" crossorigin>
          <link href=
                rel="stylesheet">        
        <style>            
           p{
             font-family: Roboto, sans-serif;
            }
            /* When the font name is more than one word, 
               it must be in quotation marks like: "Lucida Console" */
        </style>
    </head>
    <body>
        <p>Welcome to Geeks for Geeks</p>
    </body>
</html>

Output:

Example 2: When a web-safe font is not available then the fallback font will be used.

HTML




<!DOCTYPE html>
<html>
    <head>
        <!-- Google Fonts -->
        <!-- You can also download any font and then use it  -->
        <link rel="preconnect" 
              href="https://fonts.googleapis.com">
        <link rel="preconnect" 
              href="https://fonts.gstatic.com" crossorigin>
        <link href=
              rel="stylesheet">
        <title>Web Safe font and fallback font</title>
        <style>
              
           p{
            font-family: sans-serif,'Qahiri'; 
            }
            /* Qahiri will be implemented when web safe font 
              i.e sans-serif is not available */
            /* When the font name is more than one word, 
               it must be in quotation marks, like: "Lucida Console" */
        </style>
    </head>
  
    <body>
        <p>Welcome to Geeks for Geeks</p
    </body>
</html>  

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!