Trying to implement rel="preload" for Typekit but it doesn't seem to work

Community Beginner ,
Jan 23, 2020 Jan 23, 2020

Copy link to clipboard

Copied

I'm trying to implement the preload technique here:

https://blog.typekit.com/2017/09/05/improving-your-web-font-performance/

 

But Chrome's browser console is showing this error:

"The resource https://use.typekit.net/xxxxx.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."

 

This is what is in my <head>:

<link rel="preload" href="https://use.typekit.net/xxxxx.css " as="font" crossorigin>

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

 

(obviously the typekit ID is not shown here)

 

Any ideas?

 

I tried the preload with "as='style'" but that didn't work.

TOPICS
Font rendering , Performance

Views

4.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 26, 2020 Feb 26, 2020

Copy link to clipboard

Copied

Has anyone gotten this to work?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 26, 2020 Feb 26, 2020

Copy link to clipboard

Copied

I had this exact problem today and tried using `rel="preload"` without any success. The only thing that works reliably is using a hidden div applied with the desired preloaded font style.

 

The problem for me was, I was using a certain font weight for a hover state that wasn't used anywhere else on the page. This resulted in a millisecond flash where the text would disappear then appear again with the right font weight loaded. 

 

Ofc this is not ideal so had to come up with a solution. 

 

Here is my code for reference:

The following is located in the footer:

 

<div class="font-preload" aria-hidden="true">
Lorem ipsum
</div>

 

...and the accompanying CSS:

 

.font-preload {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
font-weight: 900;
}

 

Yeah it's a bit hacky but it's the only solution that works across all browsers. Hope it helps yall!

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

I use the font on my page but can  not load it like this

<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 24, 2020 Jul 24, 2020

Copy link to clipboard

Copied

Can't delete my reply, edited version below.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 05, 2020 May 05, 2020

Copy link to clipboard

Copied

Same here, been trying to figure out how to preload fonts from Typekit, and nothing seems to work. Should we preload and use font files located in the CSS directly (.woff etc)? Any answer from Adobe would be great.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 24, 2020 Jul 24, 2020

Copy link to clipboard

Copied

I'm trying the adding a hidden div method suggested below, but it doesn't seem to be working unfortunately. In my case, the correct font family is displayed, but not the correct font weight. I have it set to 200 but it looks like 400 on the page. Interestingly, my font inspector plugin thinks the correct weight is showing. 

 

Also still getting the warning in the console.

 

With...

 

 

<link rel="preload" href="https://use.typekit.net/xxxx.css" as="style" crossorigin>

 

 

 

weight (1).png

 

 

 

 

With regular embed, but all other code unchanged..

 

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

 


weight two (1).png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 04, 2021 Aug 04, 2021

Copy link to clipboard

Copied

Any response to this?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 21, 2022 Jan 21, 2022

Copy link to clipboard

Copied

LATEST

See? This is why everyone just uses Google Fonts for web projects even though most of them are generic and overpublished. Two years later and still no answer, much less any guidance from Adobe. Smh.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines