Using a easy-to-read font is critical. The font adds value to your text. It is also important to choose the correct color and text size for the font. This can help make your content more readable and visually appealing. It can also make it easier for readers to find and understand the information you are presenting.
There are many CSS properties that we can use on text-based elements to give the text different stylizations. So let’s have a look into it.
Changing font styles
To change the font of our text, we must use the font-family property. If the font name contains spaces, then we must wrap it in quotation marks (e.g. “Times New Roman”).
<html>
<head>
</head>
<body>
<p>Default font.</p>
<p class="Arial">Arial</p>
<p class="Papyrus">Papyrus</p>
</body>
</html>.Arial{
font-family : Arial;
}
.Papyrus{
font-family : Papyrus;
}
Web safe fonts
Browsers apply fonts specified in font-family only if they are installed on the system when loading a web page. Since each platform has a different set of fonts loaded by default, running the same web page on a Windows desktop, Android smartphone, or Mac OS X laptop may result in different results.
Using web-safe fonts can help solve this problem. Web-safe fonts are a set of fonts that are consistent across platforms, so no matter what device your user is using, the results will be the same.
Here is the list of few common fonts that are safe across most platforms:
• Arial
• Times New Roman
• Helvetica
• Georgia
Font stacking
Suppose we want to use a font that isn’t available on every system. For this, the font-family accepts multiple font names, separated by commas.
We can set multiple fonts for the same element and the browser will choose the first one it finds. This is useful if the font you’re trying to use is not installed on the user’s system.
p {
font-family: "Helvetica Neue", Helvetica, sans-serif;
}This is referred to as a font stack. CSS applies fonts by priority in the font stack. The last font listed in font-family font stack should be a generic-family font. In the example above, the last font is a generic-family font.
The browser will check for the first font, and if it isn’t available, it will move on to the next font in the list. If none of the listed fonts are available, the browser will use the generic font specified.
Here are more generic font examples that you can use.
<html>
<head>
<title>Generic-family fonts</title>
</head>
<body>
<p class="serif">Serif font</p>
<p class="sans-serif">Non-serifs font</p>
<p class="monospace">Fixed-width font</p>
<p class="cursive">Cursive fonts</p>
<p class="fantasy">Decorative font</p>
</body>
</html>
.serif {
font-family: serif;
}
.sans-serif {
font-family: sans-serif;
}
.monospace {
font-family: monospace;
}
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
Loading additional fonts
Additionally, if you aren’t satisfied with web-safe fonts, you can load additional fonts when a browser downloads your website. In Google Fonts, you can load additional fonts by embedding a CSS stylesheet in the <head> element.
<html>
<head>
<title>Loading Additional Fonts with Google Fonts</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
</head>
<body>
<h1>Sofia</h1>
<p>Whereas recognition of the inherent dignity</p>
</body>
</html>* {
font-family: 'sofia', sans-serif;
}
Adding too many fonts to your web page will slow down its loading time. To ensure your user’s experience isn’t compromised, additional fonts should be used sparingly.
Use only fonts that are widely available and easy to read. Keep the number of fonts to a minimum and opt for simpler font designs to improve readability. Additionally, ensure that the font size is large enough for easy readability.
