How to use preloaded fonts in HTML?
Tags: html
Published: 2022-12-12 05:36:08

---
  title: How to use preloaded fonts in HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 11:06:08 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/use-preloaded-fonts-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_ed141f0e2c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/use-preloaded-fonts-html)
  To use the [preloaded fonts](https://melvingeorge.me/blog/load-font-from-url-as-soon-as-possible-or-preload-font-html) in HTML, you have to use another `link` tag and then use the `href` attribute where the value is the same url you used for preloading the fonts followed by the `rel` attribute where the value of it should be `stylesheet`. The new `link` tag must be after the preloading `link` tag and should be inside the `head` tag in the HTML code.

### TL;DR

```html
<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />

    <!-- Using another `link` tag to use the preloaded font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>

  <!-- Styles for the webpage -->
  <style>
    body {
      font-family: Xanh Mono;
    }
  </style>
</html>
```

For example, let's say we have a webpage with the text of `Hello World` where we also have a font preloaded using the `link` tag like this,

```html
<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
```

Now we need to use another `link` tag right after the preloaded `link` tag. The new `link` tag should have an attribute of `href` and the value of it should be the same font url as the preloaded font url followed by the `rel` attribute having the value of `stylesheet`.

It can be done like this,

```html
<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />

    <!-- Using another `link` tag to use the preloaded font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
```

We have now the font ready to be used, let's apply it to all the texts in the `body` tag using the `font-family` CSS property and then using the font's name which is `Xanh Mono` as its value.

It can be done like this,

```html
<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />

    <!-- Using another `link` tag to use the preloaded font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>

  <!-- Styles for the webpage -->
  <style>
    body {
      font-family: Xanh Mono;
    }
  </style>
</html>
```

We have successfully used our preloaded font in HTML. Yay 🥳.

See the above code live in the [codesandbox](https://codesandbox.io/s/use-preloaded-fonts-html-bt6sqf?file=/index.html).

That's all 😃.