Preload typekit font css

user_7201446 0
Viewed 7444

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>
typekit preload css
3 Answers

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

I've just faced exactly the same problem, and I did solve with this structure

<!-- https://use.typekit.net & https://p.typekit.net is the font file origin (Lighthouse required both links from Adobe) -->
    <!-- It may not have the same origin as the CSS file (https://use.typekit.net/pgd3inh.css) -->
    <link rel="preconnect" href="https://use.typekit.net" crossorigin />
    <link rel="preconnect" href="https://p.typekit.net" crossorigin />

    <!-- We use the full link to the CSS file in the rest of the tags -->
    <link rel="preload" as="style" href="https://use.typekit.net/dwg7avv.css" />

    <link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" media="print" onload="this.media='all'" />

    <noscript>
        <link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" />
    </noscript>

This article helps me to solve it and know why

user_67632780
user_131339620
Related