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 offont/woff2
to specify the type of font we are going to use. Thewoff2
is a better-performant and well-supported font type among browsers. - the
as
attribute with a value offont
to specify the kind of file we are preloading. - and finally the
crossorigin
attribute without any value. Using thecrossorigin
attribute without any value will consider the browser to use the value ofanonymous
so that request will use theCORS
headers and also the credentials flag is set to the value ofsame-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>
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>
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>
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 offont/woff2
as
with the value offont
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>
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 😃.