What are web-safe fonts and fallback fonts in 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 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;
}
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.
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 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
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>
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
