Menu
Does anyone know how to preload typekit font? Right now my computed font is Ariel and I get the error:
The resource https://use.typekit.net/dwg7avv.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The font works if I do a normal import.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
body {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>
<body>
This is my font.
</body>
</html>
205
Short answer, you have to load the stylesheet at the end of your head element.
For explanation why, you can check out the documentation from mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
So with your example it should be like:
<head>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
<link rel="preload" href="main.js" as="script">
...
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
