Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is web safe font and fallback fonts in CSS?
Websites are designed for the users to get information about the company and products as well as its services. Any website needs to be clear as well as beautiful for the readers to respond to it. Typography of a website is a crucial factor in making it consistent and giving it an aesthetic look. The whole personality of the website is framed by the typography, which is crucial in creating brand identification. Users will start to identify a certain typeface with your brand if you utilise distinctive and consistent typography.
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.
There are various web safe fonts introduced by Google for the developers which can be downloaded for free. In this article, we will discuss about the web safe fonts and fallback fonts offered by CSS available for the developers.
What are web safe fonts?
Web safe fonts are font 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, the browsers would display generic font like Times New Roman, if the users’ local system doesn’t have that font installed. However, the developers would not be able to detect if the fonts are displayed improperly at the server’s end. This results in bad users’ 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.
Syntax
element{
font-family: font1;
}
Kinds of web safe fonts
There are six kinds of 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 the ones which have equal space in between the letters. Space Mono, Courier, Inconsolata etc., are Monospace fonts.
Sans-serif – These fonts are opposite of serif fonts. They don’t contain small protrusions. Arial, Helvetica, Futura, Calibri etc., are some of the examples of Sans serif.
Fantasy - These fonts are highly styled and decorative ones. Papyrus, Herculanum, Luminari are Fantasy fonts.
MS - These are the fonts introduced by Microsoft. Trebuchet MS, MS Gothic, Georgia etc., are MS fonts.
Cursive - These fonts resemble cursive handwriting. Brush Script MT, Broadley, Monarda, Raksana etc., are some of the cursive fonts.
Example
<!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> 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 are fallback fonts 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.,.
The generic ones have some similar looking font families so, in case the primary font is not available on the users’ system, there will be a fallback mechanism which contains a list of similar font families which can be used instead. These fonts are known as fallback fonts. They are used as backup in web designing because no web font is 100% safe. There is always a chance of error.
Fallback fonts solve this problem by acting as a backup. Those font families which are web safe fonts can also be set as fallback fonts. Some examples of fallback fonts are Cursive, Fantasy, Monospace etc.,
Syntax
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> 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 families of the text are the font1. If any browser doesn’t supports the font1 font family, then we have a list of font families beside it which can be used as fallback fonts.
Conclusion
Using web safe fonts in web designing is a good practice because it ensures the developers that it will be displayed on the users’ device. However, web safe are not 100% trusted. So, make use of CSS fallback fonts as backup for the fonts so that if a font family doesn’t work, the browser could try another one enlisted. It is good coding practice to use a generic font family as the first font and then using font families of the same as the other options.
481 Views
