CSS What are web-safe fonts and fallback fonts
What are CSS web-safe fonts and fallback fonts?
Websites are designed to allow users to obtain information about a company, its products, and its services. Any website needs to be clear and aesthetically pleasing for readers to respond to it. A website’s typography is a key factor in maintaining its consistency and giving it an aesthetically pleasing appearance. The overall personality of a website is formed by its typographic design, which is crucial to creating brand identity. If you utilize unique and consistent typography, users will begin to identify a certain font with your brand.
When you use good typography, you can maintain reader interest and persuade them to stay on your website longer. By creating a solid graphic balance and a strong visual hierarchy, it helps establish the overall tone of the website. Furthermore, it influences how decisions are made and has a significant impact on how readers process and interpret textual material. It makes content engaging, thus impacting the readability of the website.
Google has released a variety of web-safe fonts for developers, which are free to download. In this article, we’ll discuss the web-safe fonts and fallback fonts that CSS offers developers.
What are web-safe fonts?
Web-safe fonts are fonts that are supported by all browsers on any device. These fonts enable developers to display them correctly even if they are not installed on the user’s device.
Before the development of web-safe fonts, if the user’s local system didn’t have Times New Roman installed, the browser would display this generic font. However, if the fonts were displayed incorrectly on the server, developers would not be able to detect them. This resulted in a poor user experience.
Using web-safe fonts can solve this problem. If you use web-safe fonts during web design, you can be confident that your fonts will display on every device.
Syntax
element{
font-family: font1;
}
Types of web-safe fonts
There are six types of web-safe fonts. They are:-
- Serif – These fonts have small ridges in the body of each letter. They are easier to read on screen and in print. Times New Roman is an example of a serif font.
-
Monospace fonts – These fonts have equal space between letters. Space Mono, Courier, Inconsolata, etc. are all monospace fonts.
-
Sans-serif – These fonts are the opposite of serif fonts. They do not contain small ridges. Arial, Helvetica, Futura, Calibri, etc. are some examples of sans-serif fonts.
-
**Fantasy ** fonts – These fonts are highly stylized and decorative. Papyrus, Herculanum, and Luminari are fantasy fonts.
-
MS – These fonts are released by Microsoft. Trebuchet MS, MS Gothic, Georgia, etc. are all MS fonts.
-
**Cursive ** – These fonts resemble cursive scripts. Brush Script MT, Broadley, Monarda, Raksana, etc. are some examples of 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 provides two types of font families for web design. One is a general-purpose font family, such as serif fonts (Times New Roman, Georgia, etc.), and the other is a specific font family, such as Arial, Calibri, etc.
General-purpose fonts have similar-looking font families. Therefore, if the user doesn’t have the primary font on their system, there’s a fallback mechanism containing a list of similar font families that can be used instead. These fonts are called “fallback fonts.” They’re used as backups in web design because no web font is 100% foolproof. There’s always the possibility of error.
Fallback 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 fallback fonts are: cursive, fantasy, monochrome, etc.
Syntax
element{
font-family: font1, font2, font3, font4;
}
font2, font3, and font4 are fallback fonts used as backups. If the browser doesn’t support font1, font2 will be displayed. If font2 is not supported, font3 will be 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 family of the text is font1. If any browser does not support the font1 font family, then we have a list of font families next to it that can be used as fallback fonts.
Conclusion
Using web-safe fonts in web design is a good practice because it ensures developers that the design will display correctly on the user’s device. However, web-safe fonts are not 100% reliable. Therefore, use CSS fallback fonts as a backup for fonts so that if one font family doesn’t work, the browser can try another. It’s also good coding practice to use a common font family as the first font and then use the same font family for other options.