<link rel="preload" has an unsupported `type` value (fonts preload)

google-chrome font-face preloading
Wonka picture Wonka · Nov 14, 2017 · Viewed 8.7k times · Source

The following from Mozilla's web docs Preloading content with rel="preload" results in errors in chrome regarding the link type:

<head>
  <meta charset="utf-8">
  <title>Web font example</title>

  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

You can see the full example source code on GitHub (also see it live)

Here us a screenshot of the live link: enter image description here

It seems these are the unsupported types that error out:

type="application/vnd.ms-fontobject"
type="image/svg+xml"

How can I get rid of that error in console for those webfont types? The types are as is from their example. I know I can physically hide the error via filters to not show in console, but I really want to prevent it from showing in the first place using a correct solution.

Answer

Hung Pham picture Hung Pham · Dec 3, 2017

follow w3c about preload, you can remove type in preload tag ex: 

<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" crossorigin>
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="image" crossorigin>

Related questions

Why does this "Slow network detected..." log appear in Chrome?

I noticed this info log began to appear in Google Chrome Dev (Version 55.0.2883.18 dev) and I can't imagine why. Slow network is detected. Fallback font will be used while loading: http://font-path.extension` It appears on all websites that use …

Read More
font-face with wrong MIME type in Chrome

This is the @font-face declaration I have used: @font-face { font-family: SolaimanLipi; src: url("font/SolaimanLipi_20-04-07.ttf"); } This is working perfectly in Firefox but not in Chrome. After "inspect element" I got the following message: Resource interpreted as font …

Read More
Where to see font files loaded by chrome in the inspector?

What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'm having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything …

Read More