How to Use Downloaded Fonts in CSS

What is Custom Fonts in CSS?

In CSS, custom fonts are fonts that we can use after downloading or creating them. In simple words, custom fonts are those that are not built-in in our system. They can include fonts that we downloaded or specially branded fonts that our company uses.

How to use downloaded fonts in CSS

If we want to add or use the downloaded font in CSS, we need to download the font file that we want to add to our project file. We can download the font from websites or purchase a font license.

There are some methods that we can use to add downloaded font in CSS:

✅ @font-face
✅ @import
✅ <link>

CSS @font-face

In CSS, using CSS @font-face, we can specify a custom or downloaded font for our webpage.

Let's take an example for better understanding:

Example


@font-face {
   font-family: "Roboto";
   src: url("path/to/roboto-regular.woff2") format("woff2");
}

Explanation

In the above example:

✅ @font-face: is a CSS property that is used to add custom or downloaded fonts.
✅ font-family: we set the font family to the Roboto
✅ Src: it specifies the path and also the format for our downloaded font

We can use the custom or downloaded font on the webpage.

CSS @font-face rule

In CSS, we use @font-face to load the downloaded font on the webpage. With the help of @font-face, a custom font can be loaded from a remote server, or we can locally install the font from the user's system.

Syntax

Example


@font-face {
font-family: "font"
src: url() format ()
}

✅ @font-face refers to the font family to be loaded
✅ Src is used to specify the URL and format for the custom font in the file
✅ url specifies the remote or locally hosted font path
✅ format refers to the font file in the CSS

Example

HTML:

Example


<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="style.css" />
<title>Custom font in CSS</title>
   </head>
   <body>
       <h1>Custom fonts in CSS</h1>
       <p>
           We can use the @font-face property for using the custom fonts in
           CSS.
       </p>
   </body>
</html>

Example


/* allows to set Helvetica font*/
@font-face {
   font-family: "Helvetica";
   src: url("https://fonts.gstatic.com/s/helvetica/v1/7Auop_0qiz-aVz7u3PJLcA.eot?#iefix")
format("embedded-opentype"),
url("https://fonts.gstatic.com/s/helvetica/v1/7Auop_0qiz-aVz7u3PJLcA.woff2")
format("woff2"),
          url("https://fonts.gstatic.com/s/helvetica/v1/7Auop_0qiz-aVz7u3PJLcA.woff")
format("woff");
}
h1, p {
   /* sets the text to Helvetica font */
   font-family: Helvetica;
}

Output:

CSS @import rule

In CSS, we use the @import property to import other remotely hosted fonts. With the help of the @import property in CSS, we can simply import the custom font from other websites.

Syntax:

Example


@import url (link);

Example


<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="style.css" />
<title>Using import rule</title>
   </head>
   <body>
       <h1>Using CSS @import rule</h1>
       <p>
           My name is Rohit Abdul
       </p>
   </body>
</html>

Example


@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");
h1, p {
   font-family: "Roboto Mono", monospace;
}

Output:

CSS <link> tag

In CSS, with the help of the <link> tag, we can load the font in the file just the way we used in the @import rule. With the use of <link> tag, we can add the downloaded or custom font to the project.

Syntax:

Let's see the syntax of the <link> tag in CSS:

Example


<link href= "link" rel=""/>

Example:

Example


<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
rel= "stylesheet"/>
<title>Using Link tag</title>
   </head>
   <body>
       <h1>Using link tag</h1>
       <p>
           BanKai!! ?Senbonzakura Kageyoshi.?
       </p>
   </body>
</html>

Example


h1, p {
   font-family: "Roboto Mono", monospace;
}

Output:

Benefits of using Custom fonts in CSS

There are several benefits of using the custom fonts on the website:

Branding

In CSS, we use custom fonts to create a unique and attractive look for a brand that makes it more memorable and can be recognized by users.

Performance

In CSS, we can use custom fonts to design specific content for a website and optimize it for its specific needs. This can load data faster and enhance performance.

Flexibility

With the use of a custom font, we can modify or customize the design to better suit the website, whereas web fonts are generally fixed and cannot be changed easily.

Control

In CSS, using custom fonts gives us more control over the website's appearance. With the help of downloaded fonts, we can choose the exact size, spacing, and other aspects of the font, but with web fonts, we are limited to the options provided by the service.

Uniqueness

By using custom fonts, we can help our website stand apart from the others and become more unique, which allows us to stand out from the competition.

What is Custom Fonts in CSS?