Contents
CSS font family explained
By default, you can only choose from a handful of web-safe fonts to use in CSS. While they are practical and popular, they might not be of much use if you want to create a unique design. To be able to add a custom CSS font family and use it in your document, you need to use the @font-face rule:
@font-face {
font-family: fontname;
src: url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2);
}Using @font-face
By using the @font-face rule, you can include a custom CSS font family, load it in the browser and present it in the website:
@font-face {
font-family: fontname;
src: url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2);
font-weight: italic;
}This rule must appear before other styling properties in stylesheets.
To load a custom font family in CSS, you must define two properties:
- font-family defines the name of the font
srcdefines a URL from which the font will be downloaded
You can also include some optional properties:
| Property | Description |
|---|---|
| font-stretch | Defines how the font is stretched (normal by default) |
| font-style | Defines how the font is styled (normal by default) |
| font-weight | Defines the boldness of the font (normal by default) |
| unicode-range | Defines the unicode characters the font supports (U+0-10FFFF by default) |
How to use a downloaded font
To use a custom font family in CSS, you need to first find a trusted source that offers fonts (e.g., Font Squirrel) and download the file with the font you want. You might need to extract it when it finishes downloading.
The next steps differ slightly for Windows and Mac users:
| Windows | Right-click on the file to install it. Move the font files with the .ttf, .otf or .fon extension to the Fonts folder. |
| Mac | Double-click on the file and select Install Font in the menu that appears. |
Alternative methods for adding fonts
There are two methods that allow you to add a custom CSS font family without using @font-face – linking and importing.
Linking font files requires you to add a <link> element with the font source defined in the <head> part of the HTML document:
<link href="https://fonts.googleapis.com/css?family=Gayathri&display=swap" rel="stylesheet">
div {
font-family: 'Gayathri', sans-serif;
}Importing font files requires using the @import rule. Again, you will need to define the source to import the CSS font family from:
@import url('https://fonts.googleapis.com/css?family=Gayathri&display=swap');
div {
font-family: 'Gayathri', sans-serif;
}