CODEWITHSUNDEEP
csspreloadtypekit
ComCool
ComCool

Reputation: 1103

Preload typekit font css

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>

Upvotes: 8

Views: 12245

Answers (4)

Peter Katoff
Peter Katoff

Reputation: 1

As of 2023 this works. It will result in shorter load times for Adobe Fonts with CSS embed only in Head. Should save about 30% on average. Don't forget to enter your own CSS embed code in place of "xxxxxxx". Adobe recommends preconnect and preload, they just don't provide the code. Just paste the following in the Head and enter your embed code.

<link rel="preconnect" href="https://use.typekit.net" crossorigin>
<link rel="preconnect" href="https://p.typekit.net" crossorigin>
<link rel="preload" href="https://p.typekit.net" crossorigin>
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>

Upvotes: 0

CrsCaballero
CrsCaballero

Reputation: 2348

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

Upvotes: 7

LMC
LMC

Reputation: 1

It's a bug, I had the same problem and i'm now giving up: https://bugs.chromium.org/p/chromium/issues/detail?id=593267

Funny is, the only reason I tried to use preload, was of the chrome lighthouse test that recommendet it to me.

And here the picture of it kinda preload but not actualy working! enter image description here

Upvotes: -4

monmonja
monmonja

Reputation: 2264

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>

Upvotes: 8

Related Questions