Open In App

What are web safe fonts and fallback fonts in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads