How to load custom fonts into a webpage using CSS?
Tags: css
Published: 2022-12-12 05:37:08

---
  title: How to load custom fonts into a webpage using CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:07:08 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/load-custom-fonts-webpage-using-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_55a065c462.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/load-custom-fonts-webpage-using-css)
  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
<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
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>
```

It may look like this visually,

![simple webpage with hello world text](/uploads/Screenshot_2022_11_10_at_11_11_12_PM_97f5a0a6f0.png)

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
<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
<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
<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
<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,

![webpage texts shown in the new custom font](/uploads/Screenshot_2022_11_10_at_10_53_41_PM_0953657a7f.png)

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

See the above code live in the [codesandbox](https://codesandbox.io/s/load-custom-fonts-webpage-using-css-5d5wq1?file=/index.html).

That's all 😃.