How to only preload required type (woff vs woff2) depending on browser?

Viewed 480

I am using the following react-helmet code and I see both woff and woff2 files are preloaded by Firefox (which is inefficient given only woff2 is required).

Is it normal Firefox loads both? How can I tell the browser to only preload required file?

<Helmet
  link={[
    {
      rel: "preload",
      href: "/static/media/open-sans-latin-400.347639ec.woff",
      as: "font",
      type: "font/woff",
      crossOrigin: "anonymous",
    },
    {
      rel: "preload",
      href: "/static/media/open-sans-latin-400.f57a62e9.woff2",
      as: "font",
      type: "font/woff2",
      crossOrigin: "anonymous",
    },
  ]}
/>
0 Answers
Related