How to load a font from a url as soon as possible or preload a font in HTML?
Tags: html
Published: 2022-12-12 05:36:38

---
  title: How to load a font from a url as soon as possible or preload a font in HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 11:06:38 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/load-font-from-url-as-soon-as-possible-or-preload-font-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_ea48fbd232.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/load-font-from-url-as-soon-as-possible-or-preload-font-html)
  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
<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>
```

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

In HTML, it may look like this,

```html
<html>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>
```

We need to use a font that is hosted at this url: [https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap](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
<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>
```

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

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?](https://melvingeorge.me/blog/use-preloaded-fonts-in-html).**

See the above code live in the [codesandbox](https://codesandbox.io/s/load-fonts-as-soon-as-possible-or-preload-fonts-html-4hqj23?file=/index.html).

That's all 😃.