Originally posted here!
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 😃.
Top comments (0)