If you wish to add a font on your website that is not present on the user’s computer by default then you can use the CSS @font-face rule to do so. The @font-face rule specifies that first, you have to provide a certain name to the custom font and afterward point to the font file. In this write-up, you will establish an understanding of how to use external web fonts in CSS. This tutorial covers the following topics.
Let’s begin.
Font Formats
Before we dive into the details of how to add external web fonts, we first need to establish a basic understanding of different font formats which we have explained in detail below.
TrueType Fonts
The TrueType Fonts or TTF is a standard font format that was founded by Microsoft and Apple back in the late 80s, hence it is compatible with both operating systems. It is highly suitable for expanding support for old browsers, especially on smartphones.
OpenType Fonts
The OpenType Fonts or OTF is a font format invented by Microsoft on the same patterns as that of TrueType Fonts. This format is widely used on most computer systems.
Web Open Font Format
The WOFF font format originated in 2009 as a format covering both the TTF and OTF formats. This format compacts the files and is compatible with all modern browsers. It has two versions, the second one is referred to as WOFF 2.0 and compacts files in a better way than the older version.
Embedded OpenType Fonts
The Embedded OpenType Fonts, more commonly referred to as EOT is a format that is a compression of OTF developed by Microsoft. This format is used as embedded fonts on websites.
SVG Fonts
An SVG Fonts format allows displaying SVG in the form of vector graphics. This means that various characters will be displayed in different colors or animations.
Now that we have learned about the various font formats, consider the steps below to understand the whole procedure of adding external fonts to your website.
How to add external web fonts using CSS
Below we have provided you a step-by-step guide on how you can add external fonts using CSS.
Step 1: Download custom fonts
The first step would be to download your desired fonts in the TrueType Fonts format (.ttf) or the OpenType Fonts format (.oft) from any font repository. For instance, here we are downloading ‘Dancing Script’ fonts from Google Fonts.
Click on the ‘Download family’ to download custom fonts.
Step 2: Extract files from zip folder
Once downloaded, extract files from the zip folder.
The fonts are in the .ttf format. Now select any one of these fonts that belong to the ‘Dancing Script’ font family.
Note: Make sure that your downloaded files are present in the same folder as the web file.
The font file is present in the exact same folder as the web file.
Step 3: Add fonts in your CSS file
To your external fonts in your CSS file, use the @font-face rule. The @font-face rule specifies that first, you have to provide a certain name to the custom font and afterward point to the font file by giving the url to the src attribute.
We have assigned the name ‘customFonts’ to the font-family, then we have provided the url of the font file to the src attribute. Lastly, we are assigning the font family to our heading and giving it some color.
Step 4: Link your CSS file to the HTML file
And finally, add your stylesheet to your HTML file.
We are externally linking our CSS file to the HTML file.
Output
An external custom web font has successfully been added.
Font Formats and their Browser Support
The table below shows all font formats and their relevant browser support.
| Font Format | Microsoft Edge | Google Chrome | FireFox | Safari | Opera |
|---|---|---|---|---|---|
| TTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| OTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| EOT | 6.0 | Not supported | Not supported | Not Supported | Not Supported |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
Conclusion
To use external fonts in CSS, download desired fonts from any font repository and add them into the CSS file using the @font-face rule which specifies a certain name to the custom font and point to the font file by giving the url to the src attribute. This tutorial is designed to explain about using different font formats and how external web fonts can be used in CSS.
