title: Preloading fonts in Chrome with 'preload' link directive
body: <p>The <code>preload</code> directive is not performing in Chrome as expected. Below is a full HTML page that may be opened in Chrome for results comparison. It should be applying all 5 fonts; instead, it only applies the first preloaded font, makes a faux italic for what should be the second, and simply substitutes the default serif for the remaining 3. </p>
  
  <p>Additionally, in the developer's console, this message appears--after about 3 seconds--for each of the five fonts:</p>
  
  <p><code>The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.</code></p>
  
  <p>Strangely, it did apply the first font (Muli) to the <code>h1</code> and <code>h2</code> tags (although making a faux italic for the <code>h2</code>); you can click on the URLs in the error messages and a preview of the preloaded font will appear in the developer's console.</p>
  
  <p>Any clue what's amiss here? (I've tested this on Chrome 56 on Windows 8.1 Pro.)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Preload Font Test&lt;/title&gt;
      &lt;link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2" as="font" type="font/woff2" crossorigin&gt;
      &lt;link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2" as="font" type="font/woff2" crossorigin&gt;
      &lt;link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2" as="font" type="font/woff2" crossorigin&gt;
      &lt;link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2" as="font" type="font/woff2" crossorigin&gt;
      &lt;link rel="preload" href="https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2" as="font" type="font/woff2" crossorigin&gt;
      &lt;style&gt;
          h1 {font-family:'Muli';font-weight:400;font-style:normal;font-size:1.5em}
          h2 {font-family:'Muli';font-weight:400;font-style:italic;font-size:1.5em}
          h3 {font-family:'Open Sans';font-weight:700;font-style:normal;font-size:1.5em}
          h4 {font-family:'Open Sans';font-weight:700;font-style:italic;font-size:1.5em}
          h5 {font-family:'Lato';font-weight:900;font-style:normal;font-size:1.5em}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;This should be in Muli regular 400 -- and it is!&lt;/h1&gt;
      &lt;h2&gt;This should be in Muli Italic 400 -- but it's faux Muli Italic :(&lt;/h2&gt;
      &lt;h3&gt;This should be in Open Sans Bold 700 -- but it's the default serif!&lt;/h3&gt;
      &lt;h4&gt;This should be in Open Sans BoldItalic 700  -- but it's the default serif!&lt;/h4&gt;
      &lt;h5&gt;This should be in Lato ExtraBold 900  -- but it's the default serif!&lt;/h5&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>