cant make all browsers happy when preloading fonts - console errors

user_5200574 0
Viewed 628

I have been trying to preload fonts and no matter how I write it, either Chrome, or Firefox will throw some sort of console error.

Case 1

<link rel="preload" href="/fonts/open-sans-v26-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/RobotoCondensed-Regular.ttf" as="font" type="font/truetype" crossorigin>

Firefox:

Error 1
Preload of /fonts/RobotoCondensed-Regular.ttf was ignored due to unknown “as” or “type” values, or non-matching “media” attribute.

Error 2
The resource at “/fonts/open-sans-v26-latin-regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

The resource at “/fonts/RobotoCondensed-Regular.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Chrome:

<link rel=preload> has an unsupported `type` value

The resource /fonts/open-sans-v26-latin-regular.woff2 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.

Case 2(remove type as recommended on many threads here)

 <link rel="preload" href="/fonts/open-sans-v26-latin-regular.woff2" as="font"  crossorigin>
  <link rel="preload" href="/fonts/RobotoCondensed-Regular.ttf" as="font"  crossorigin>

Firefox:

The resource at “/fonts/open-sans-v26-latin-regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

The resource at “/fonts/RobotoCondensed-Regular.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Chrome:

The resource /fonts/open-sans-v26-latin-regular.woff2 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 resource /fonts/RobotoCondensed-Regular.ttf 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.

How do I make these console errors go away? The fonts are displayed instantly when page loads.

fonts html performance
1 Answers

In order to preload fonts, the server which hosts the fonts must use CORS, even if your html file is on the same origin/domain.
(There's no good reason for this, it's just an arbitrary restriction)

When using <link>, if the crossorigin attribute is present, the server must return the proper CORS headers for the link to work properly.
(see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)

Normally, you don't need this attribute, if your resources are hosted on the same origin as your html file.

However, preloading fonts is a special case, and cross-origin mode is always required.
(see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload)

user_62327940
Related