Preload typekit font css

Question

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>

I did. And it says nothing about this. – ComCool Feb 26 '20 at 10:32 — ComCool, Feb 26 '20 at 10:32
I did, that is not the problem here. OMG – ComCool Feb 26 '20 at 10:39 — ComCool, Feb 26 '20 at 10:39
Check this: https://codepen.io/manaskhandelwal1/pen/WNvpEKY – Manas Khandelwal Feb 26 '20 at 10:41 — Manas Khandelwal, Feb 26 '20 at 10:41

score 7 · Answer 1 · answered Mar 23 '20 at 10:59

7

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>

answered Mar 23 '20 at 10:59

monmonja

2,203
5
22
33

This does not work for me . Can you help me why ? – Mittul At TechnoBrave Nov 16 '21 at 13:01
I am doing this - `` `` still its saying -- Ensure text remains visible during webfont load. – Mittul At TechnoBrave Nov 16 '21 at 13:01
@MittulAtTechnoBrave You need to enable something like font-display: swap in order to make text visible during load of external font. But before enabling it, you should understand what it does! – Sheldor the conqueror Mar 31 '22 at 09:48
Hi @Sheldortheconqueror Thanks for your response. Actually I logged into Adobe from where I purchased a font and set to swap and set default font from there and it got me resolved. Thanks – Mittul At TechnoBrave Apr 01 '22 at 10:37

score 4 · Answer 2 · answered Jul 06 '22 at 00:05

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

Don't forget to make sure that your font file must include the `swap` property inside — CrsCaballero, Jul 30 '22 at 22:51

score 0 · Answer 3 · answered May 04 '23 at 19:32

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"/>

LMC · Answer 4 · 2020-08-21T19:17:20.110

-4

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!

edited Aug 21 '20 at 19:17

answered Aug 21 '20 at 19:01

LMC

1
2

Preload typekit font css

4 Answers4