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 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
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;
}
Font2, font3, font4are 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!
The Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AMIn this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.
Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AMCustom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.
Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AMInteractive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a
Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AMTips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.
SMIL on?Apr 23, 2025 am 09:57 AMWell, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously
'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AMYay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.
CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AMThis CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.
Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AMMost of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio
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
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 Chinese version
Chinese version, very easy to use
