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 fontsFonts provided by CSS are available to developers.
What are web-safe fonts?
Web safe fontsare 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 Romanif 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;
}
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> 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>
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
fallbackmechanism 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.
BackupFonts 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;
}
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>
Conclusion
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
