DEV Community

Cover image for How to load a font from a url as soon as possible or preload a font in HTML?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

How to load a font from a url as soon as possible or preload a font in HTML?

#html

Originally posted here!
To load a font from a url as soon as the webpage loads is to use the link tag. In the link tag you can use the href attribute where the value should be the url or path to your font file, then the rel attribute with the value of preload. The value preload will instruct the browser to load the fonts as soon as possible. The link tag should be placed inside the head tag of the HTML code.

We also need to add three more attributes like the below:

  • the type attribute with a value of font/woff2 to specify the type of font we are going to use. The woff2 is a better-performant and well-supported font type among browsers.
  • the as attribute with a value of font to specify the kind of file we are preloading.
  • and finally the crossorigin attribute without any value. Using the crossorigin attribute without any value will consider the browser to use the value of anonymous so that request will use the CORS headers and also the credentials flag is set to the value of same-origin which is what we want.

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
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

In HTML, it may look like this,

<html>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

We need to use a font that is hosted at this url: https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap. The font name is Xanh Mono.

To do that we can use the link tag and then add the href attribute with the value of the font url and then use the rel attribute with the value of preload to load the font as soon as the page loads.

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"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let's also supply additional attributes to instruct the details about the font we are preloading from the url. The attributes are:

  • type with the value of font/woff2
  • as with the value of font
  • crossorigin without any 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
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This will preload all the font files and cache them so that we can use the font.

NOTE: The above link tag with font preloading will only load the font and adds it first in the request chain and caches it. We still need to tell the browser we are going to use this font. To know more about it see the next blog on How to use the preloaded fonts in HTML?.

See the above code live in the codesandbox.

That's all 😃.

Top comments (0)