title: The link preload is not avoiding the font loading duplication
body: <p>I read the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" rel="noreferrer">link preload documentation</a>. In the <code>head</code> section of the html, I have</p>
  
  <pre><code>&lt;link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font"&gt;
  </code></pre>
  
  <p>Later on, I load a <code>font.css</code> file wherein it is loaded exactly the same font file (check the <code>url</code>):</p>
  
  <pre><code>@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url("/css/fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  </code></pre>
  
  <h2>Bug on Chrome?</h2>
  
  <p>But Chrome console gives warning</p>
  
  <blockquote>
    <p>The resource <a href="https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2" rel="noreferrer">https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2</a> 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 <code>as</code> value and it is preloaded intentionally.</p>
  </blockquote>
  
  <p>And indeed the browser loads the same file twice (1st and 3rd lines refer exactly to the same file)!
  <a href="https://i.stack.imgur.com/SgFxO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SgFxO.png" alt="enter image description here"></a></p>
  
  <p>How to make preload work by avoiding file loading duplication?</p>