What are web-safe fonts and fallback fonts in CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What are web-safe fonts and fallback fonts in CSS?

王林

Aug 25, 2023 pm 11:33 PM

CSS 中的网络安全字体和后备字体是什么？

The website is designed to provide users with information about companies, products and services. Any website needs to be clear and beautiful so that readers can respond to it. The typography of a website is a key factor in making it consistent and giving it an aesthetic appeal. The personality of the entire website is built by typography, which is crucial in creating brand identity. If you use unique and consistent typography, users will begin to associate a certain font with your brand. When you use good typography, you may keep readers' interest and persuade them to stay on your website for longer. By generating a solid graphic balance and a strong visual hierarchy, it aids in establishing the website's overall tone. Additionally, it influences how decisions are made and has a significant impact on how readers process and interpret the text's material. It makes the content attractive and thus impacts in the readability of the website.

Through the various web-safe fonts introduced by Google for developers, you can Download is free. In this article we will discuss web safe fonts and fallback fonts

Fonts provided by CSS are available to developers.

What are web-safe fonts?

Web safe fonts

are fonts which are supported by all the browsers on any device. These fonts enable the developers to display them properly even if they are not installed in the users’ device. Before web-safe fonts were developed, browsers would display generic fonts such as

Times New Roman

if the font was not installed on the user's local system. However, the developer cannot detect whether the font is displayed correctly on the server side. This results in a poor user experience. Using web safe fonts resolves this issue. During web designing, if you use web safe fonts, you can be rest assured that your fonts will be displayed as it is in every device.

grammar

element{
   font-family: font1;
}

Kinds of web safe fonts

There are six web-safe fonts. They are as follows −

Serif - These fonts contain small protrusions that are present in the body of each letter. They are easier to read on screen and printed forms. Times New Roman is a serif font.
Monospace - These fonts are fonts with equal spacing between letters. Space Mono, Courier, Inconsolata, etc. are all fixed-width fonts.
Sans serif fonts - These fonts are the opposite of serif fonts. They do not contain small protrusions. Arial, Helvetica, Futura, Calibri, etc. are some examples of sans serif fonts.
Fantasy - These fonts are highly stylized and decorative. Papyrus, Herculanum, Luminari are fantasy fonts.
MS - These are the fonts introduced by Microsoft. Trebuchet MS, MS Gothic, Georgia etc., are MS fonts.
Cursive Script - These fonts are similar to cursive handwriting. Brush Script MT, Broadley, Monarda, Raksana, etc. are some cursive fonts.

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title> Web Safe Fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      h1{
         color: green;
         text-decoration: underline;
      }
      .demo1{
         font-family: Times New Roman;
      }
      .demo2{
         font-family: Arial;
      }
      .demo3{
         font-family: Courier;
      }
      .demo4{
         font-family: Brush Script MT;
      }
      .demo5{
         font-family: Trebuchet MS;
      }
      .demo6{
         font-family: fantasy;
      }
   </style>
</head>
<body>
   <center>
      <h2 id="Web-Safe-Fonts"> Web Safe Fonts </h2>
      <div class= "demo1"> This is an example in Times New Roman font. </div>
      <div class= "demo2"> This is an example in Arial font. </div>
      <div class= "demo3"> This is an example in Courier font. </div>
      <div class= "demo4"> This is an example in Brush Script MT font. </div>
      <div class= "demo5"> This is an example in Trebuchet MS font. </div>
      <div class= "demo6"> This is an example in Fantasy font. </div>
   </center>
</body>
</html>

What is the fallback font in CSS?

CSS offers two types of font families for web designing. These are generic font families like serif (Times New Roman, Georgia, etc.,) and the individual font families like Arial, Calibri etc.,.

A common font family has a number of similar-looking fonts, so if a primary font is not available on the user's system, there is a

fallback

mechanism that contains a list of similar font families that can be used instead. These fonts are called alternate fonts. They are used as backup in web design because no web font is 100% safe. There is always the possibility of error.

Backup

Fonts solve this problem by acting as a backup. Font families that are web-safe fonts can also be set as fallback fonts. Some examples of alternative fonts include cursive, fantasy, monospaced, etc. grammar

element{
   font-family: font1, font2, font3, font4;
}

Font2, font3, font4

are the fallback fonts which are used as backup. If browser doesn't support font1, then font2 will be displayed. If not font2, then font3 is used and so on. Example

<!DOCTYPE html>
<html>
<head>
   <title> Fallback fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      .demo1{
         font-family: verdana,'cursive';
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
      }
      .demo3{
         font-family: Helvetica, arial, cursive, 'Times New Roman';
      }
      .demo4{
         font-family: 'Times New Roman', Cambria, Cochin, Georgia, Times, serif;
      }
   </style>
</head>
<body>
   <center>
      <h2 id="Fallback-fonts"> Fallback fonts </h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
      <p class= "demo3"> This is an example. </p>
      <p class= "demo4"> This is an example. </p>
   </center>
</body>
</html>

In the above example, the font family of the text is font1. If any browser does not support font1 font family then we have a list of font families next to it which can be used as fallback fonts.

Conclusion

Using web-safe fonts in web design is a good practice as it ensures developers that it will be displayed on user devices. However, web-safe fonts are not 100% trustworthy. Therefore, it is possible to use CSS fallback fonts as a backup for fonts so that if one font family does not work, the browser can try another listed font family. It is good coding practice to use a common font family as the first font and then use the same font family for other options.

The above is the detailed content of What are web-safe fonts and fallback fonts in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand