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
typeattribute with a value offont/woff2to specify the type of font we are going to use. Thewoff2is a better-performant and well-supported font type among browsers. - the
asattribute with a value offontto specify the kind of file we are preloading. - and finally the
crossoriginattribute without any value. Using thecrossoriginattribute without any value will consider the browser to use the value ofanonymousso that request will use theCORSheaders and also the credentials flag is set to the value ofsame-originwhich 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:
-
typewith the value offont/woff2 -
aswith the value offont -
crossoriginwithout 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 😃.
Top comments (0)