How to use preloaded fonts in HTML?

To use the preloaded fonts 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>
  <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>
  <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>
  <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>
  <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.

That's all 😃.