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

Question

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",
    },
  ]}
/>

question from:https://stackoverflow.com/questions/65909914/how-to-only-preload-required-type-woff-vs-woff2-depending-on-browser

Answer 1

Waitting for answers