How to load custom fonts into a webpage using CSS?

November 9, 2022 - 4 min read

To load custom fonts or fonts that are hosted by yourself in a server using CSS first, you need to use the @font-face CSS rule block. Inside the block you can then define a CSS property called src and the first value is a url() function where the function takes the path to your font file. Then right after the url() function you can add another function called format() in which you can pass the value of woff2. (woff2 is a well-supported font type format and has the best performance gain among the browsers).

After the src property, you need to add another property called font-family and the value should be the name of your font. You can have a custom name for your font file.

TL;DR

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
      font-family: MyCustomFontName;
    }

    body {
      font-family: MyCustomFontName;
    }
  </style>
</html>

For example, let's say we have a webpage with the text Hello World.

The HTML code would look something like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

It may look like this visually,

Now let's say we need the texts in the webpage to use our custom font file that is hosted in the root directory of the server where the index.html is also present.

To do that let's use the @font-face CSS rule block and use the src CSS property and pass the path to our font file in the url() function like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf");
    }
  </style>
</html>

Now that we have defined the path to our font file, we also need to set the format to woff2 as it is a better-performant and well-supported font format using the format() function right after the url() function.

It can be done like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
    }
  </style>
</html>

Now let's name our custom font using the font-family CSS property and use a custom font name of our choice like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
      font-family: MyCustomFontName;
    }
  </style>
</html>

We have successfully imported our custom font file and given it a name.

Now we need to apply our custom font to all the texts on the webpage, to fo that we can target the body HTML element in the CSS and use the property of font-family and pass the name of the custom font which in our case is the value of MyCustomFontName.

It can be done like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
      font-family: MyCustomFontName;
    }

    body {
      font-family: MyCustomFontName;
    }
  </style>
</html>

Now the text font in our webpage is changed to our custom font.

The webpage now looks like this,

We have successfully loaded our custom font into the webpage using CSS. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.