LAST UPDATED: JUNE 28, 2021
CSS Web Fonts
The CSS web fonts allow the user to use the fonts that are not supported by the user's system or not installed in it.
When you want to use a font that is very rare and not supported by all the systems then include the font file on your web server, and it will automatically be downloaded when the user needed.
Note: To define the own font in the CSS, we have to use the @font-face rule.
Syntax of CSS web fonts
@font-face {
/* font details */
font-family: value;
src: url('');
}
Types of Web Fonts in CSS
- TrueType Fonts (TTF)
- OpenType Fonts (OTF)
- The Web Open Font Format (WOFF)
- The Web Open Font Format (WOFF 2.0)
- SVG Fonts/Shapes
- Embedded Open Type Fonts (EOT)
TrueType Fonts (TTF)
The TrueType Fonts is a font standard that was developed in the 1980s, by Microsoft and Apple. It is a very common font format available for both Mac OS and Microsoft Windows.
OpenType Fonts (OTF)
The OpenType is a font format available for scalable computer fonts. This was developed on TrueType.and it is a registered trademark of Microsoft. The OpenType fonts are now the most used web font used on the major computer platform.
The Web Open Font Format (WOFF)
The WOFF font format is majorly used in web pages. It was developed in 2009, and it is a W3C Recommendation. WOFF is basically an OpenType and TrueType with compression and additional metadata. This font format to achieve the font distribution from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
This version of WOFF provides better compression than WOFF 1.0.
SVG Fonts/Shapes
The SVG Fonts allows the user to use SVG as a glyph icon while displaying text. The SVG 1.1 specification defines a font module that allows the creation of font modules within an SVG document. The user can apply the CSS to the SVG document, and the @font-face rule can be applied to text in the SVG document.
Embedded Open Type Fonts (EOT)
The Embedded fonts are a dense form of OpenType fonts which are designed by Microsoft. The EOT is used as embedded fonts on the web pages.
Example: Implementing Web Fonts in CSS
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> web font</title>
<style type="text/css">
@font-face {
font-family: 'SansationLight';
src: url('./SansationLight.eot');
src: local('SansationLight'), url('./SansationLight.woff') format('woff'), url('./SansationLight.ttf') format('truetype');
}
.para {
font-family: 'SansationLight' !important;
}
h1 {
font-family: 'SansationLight';
}
</style>
</head>
<body>
<h1>Hello! This heading is styled using web fonts.</h1>
<p class="para">This is the font-style which is style by applying web fonts.</p>
</body>
</html>
Output
CSS Font Descriptor
| Descriptor |
Value |
Description |
| Font-family |
name |
The font-family descriptor defines the name of the font. (Required) |
| src |
URL |
The src descriptor defines the URL of the font file. (Required) |
| font-stretch |
normal, condensed, semi-condensed, extra-condensed, ultra-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded. |
The font-stretch descriptor specifies how the font should be stretched. (Optional) |
| font-style |
normal, italic, oblique |
The font-style descriptor specifies how the font-style should be styled. (Optional) |
| font-weight |
normal, bold, 100. 200, 300, 400, 500, 600, 700, 800, 900 |
The font-weight specifies the boldness of the font. (Optional) |
| Unicode-range |
Unicode-range |
The Unicode-range descriptor specifies the range of Unicode characters that a font supports. (Optional) |
Conclusion
In this module, we have learned about CSS Web fonts. Also, the types of web fonts that are given below:
- TrueType Fonts (TTF)
- OpenType Fonts (OTF)
- The Web Open Font Format (WOFF)
- The Web Open Font Format (WOFF 2.0)
- SVG Fonts/Shapes
- Embedded Open Type Fonts (EOT)
