🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Changing the Font Family: CSS @Font-Face

Reading time 2 min
Published Aug 8, 2017
Updated Jan 21, 2020

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)
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

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