How to add custom fonts to your website using @font-face
A font is a text styling that includes a combination of typeface, size, weight, slope, width, and style to make up a displayable or printable set of characters.
There exists thousands of fonts and new ones are constantly created.
The font is used as an integral part of branding. Most companies have a chosen font, which they use across all their branding and marketing materials, the website included.
In branding, font helps create harmony and visual consistency across all platforms.
When used well, the font can help catch the reader's eye, improve and simplify the readability of the text, and establish brand recognition.
It is therefore important to not just use any font while designing a website but to use the one that the company uses in branding.
Styling website font using CSS
By default, if you create a website and don't define the font, serif font will be rendered. If you use a front-end framework such as bootstrap, a different font may be rendered.
CSS provides an easy way of setting the font of the HTML elements.
Syntax
The CSS font-family property is used.
selector {
font-family: font;
}
The CSS selector above can be any HTML element such as body, h1, p, etc. It can also be the class or id attribute of the element eg. .nav, #navbar.
Replace font property value with your preferred font name.
Example
body {
font-family: Arial;
}
The font-family property allows you to set several font names separated by commas as a fallback system so that in case the web browser does not support the first font, it tries the next font and so on.
Example
h1 {
font-family: Helvetica, Arial, sans-serif;
}
There are two types of font-family names:
| Name | Description |
|---|---|
| family-name | This is the name of a font-family eg. "Arial", "times" |
| generic-family | This is the name of a generic-family eg. "monospace", "serif", "san-serif" |
When setting multiple fonts to font-family property, start with the one you want and always end with a generic family. This will allow the browser to pick a similar font in the generic family if no other fonts are available.
Note: If there exists a space within the font name, it must be quoted(with either single or double quotes). In the case of inline CSS, where the styling is done within the "style" HTML attribute, then such a font name should only be enclosed with single quotes.
Web-safe fonts
Although we have covered above how to set your website font in CSS, that is not all.
You may already know or have encountered the term web-safe fonts.
Web-safe fonts are those fonts that come pre-installed on each Operating System(eg. Windows, Linux, Android, iOS, etc). These fonts are viewable across most devices, including desktop and mobile.
However, as I mentioned at the very beginning of this article, there exist thousands of fonts. Most of them are not pre-installed in most of the operating systems.
If you want to set your website font to a web-safe, then the above CSS code is enough to guide you how.
In many cases, companies will have a font in their branding, that is not part of the web-safe fonts.
As a web developer, you or your web design client may also find a good and eye-catching font on a website online and want to use it in your/client's website.
In most cases, you will find that font is not a web-safe font. In that case, you will have to install that font into your website project and define it in your CSS code in order to use it.
Before I show you how to install and use custom fonts, let me first show you how to check the font used on any website.
How to check font used on any website
To find out the font used on any website;
Step 1: Install a browser extension called Font Finder.
Step 2: Visit the website on which you want to check the font.
Step 3: While on the website, click at the "Font Finder" extension icon at the top of the browser, then move the cursor over and click on the HTML element with the font you want to check.
A popup window opens with many details about the font and styling of that element.
From the above screenshot, you will be able to see the font used and can use it in your website.
Note: Always check using different browsers and devices if your preferred font is rendered before you publish your website. If it isn't rendered, chances are that it is not a web-safe font, and have to install it first on your website before using it.
How to import/install custom fonts into your website
Once you have settled on the font you want to use on your website, and have tested and found out that it is not one of the web-safe fonts, you will need to install it into your website, then use it.
You just have to google/search for the font online then download it. While most fonts are available for free, some are premium and you may have to purchase them in order to use them.
In most cases, the downloaded font file will have an extension ".tff", ".woff", or ".zip".
In case it is a ".zip", extract the zipped file and inside the extracted folder you will find some file(s).
Copy the ".tff" or ".woff" font file(s) and paste it/them into your project. You can create a folder in the project and name it "fonts" to be storing all the fonts.
The next step is to load and specify the font into your project using CSS.
You will need to use the CSS @font-face rule. The @font-face rule allows you to use fonts that are not web-safe.
It takes the format below:
@font-face {
font-family: myFontName;
src: url(path/to/fontfile.woff);
}
Replace the font-family value "myFontName" with whatever name you want to give your font. You will use that name later when setting the font for various elements in the CSS code.
For the src property, replace the value in the brackets with the file path and name of your font file. In case the font is located in the same directory with the CSS file/code, you will just write the name of the file inside the brackets. Else, you will have to indicate the path, which can be absolute or relative.
To use the font in your HTML elements, just refer to the name of the font you just set (myFontName) through the font-family property as below:
h1 {
font-family: myFontName;
}
The @font-face rule is supported in all the major browsers such as Chrome, Firefox, Safari, Edge, and Opera.
That's it... We are done!
Conclusion
The font is an integral part of branding. Most companies choose and use a specific font across all their branding materials, the website included.
Font helps create harmony and visual consistency across all platforms. It can help catch the reader's eye, improve and simplify the readability of the text, and establish brand recognition.
You can easily set the preferred font on a website using CSS. However, not all the fonts are pre-installed in all the operating systems. For such fonts, you will need to install them on your website before using them.
The CSS @font-face rule helps you to install and specify a custom, non-web-safe font into your website.
In this article, you have learned how to install/import custom (non-web-safe) fonts into your website using the CSS @font-face rule.
It is my hope that you have found the article useful and easy to understand.
Feel free to share this page with your networks or link to it from your website to help us help more developers. Have a great coding time!
