It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Changing the Font Family: CSS @Font-Face

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

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:

Example
@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:

Example
@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
  • src defines 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-facelinking 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:

Example
<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:

Example
@import url('https://fonts.googleapis.com/css?family=Gayathri&display=swap');

div {
font-family: 'Gayathri', sans-serif;
}

Browser support

Browser image
Chrome
4+
Browser image
Edge
12+
Browser image
Firefox
3.5+
Browser image
IE
4+
Browser image
Opera
10+
Browser image
Safari
3.1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
10.1+
Browser image
Safari
All