title: How to apply <link rel=preload> to @font-face?
body: <p>Google recommends &quot;Consider using <code>&lt;link rel=preload&gt;</code> to prioritize fetching resources that are currently requested later in page load.&quot; But no example of how we should use this when using the @font-face method.
  Should I switch to HTML font loading method instead?</p>
  <p>What I'm using now to load my custom font:</p>
  <pre><code>@font-face {
      font-family: 'Custom';
      src: url(&quot;../fonts/Custom-Bold.eot&quot;);
      src: local(&quot;☺&quot;), url(&quot;../fonts/Custom-Bold.woff&quot;) format(&quot;woff&quot;), url(&quot;../fonts/Custom-Bold.ttf&quot;) format(&quot;truetype&quot;), url(&quot;../fonts/Custom-Bold.svg&quot;) format(&quot;svg&quot;);
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    
  @font-face {
      font-family: 'Custom';
      src: url(&quot;../fonts/Custom-Heavy.eot&quot;);
      src: local(&quot;☺&quot;), url(&quot;../fonts/Custom-Heavy.woff&quot;) format(&quot;woff&quot;), url(&quot;../fonts/Custom-Heavy.ttf&quot;) format(&quot;truetype&quot;), url(&quot;../fonts/Custom-Heavy.svg&quot;) format(&quot;svg&quot;);
      font-weight: 800;
      font-style: normal;
      font-display: swap;
    }
  </code></pre>