Search code examples
htmlcssfont-face

How to apply <link rel=preload> to @font-face?

Google recommends "Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load." But no example of how we should use this when using the @font-face method. Should I switch to HTML font loading method instead?

What I'm using now to load my custom font:

@font-face {
    font-family: 'Custom';
    src: url("../fonts/Custom-Bold.eot");
    src: local("☺"), url("../fonts/Custom-Bold.woff") format("woff"), url("../fonts/Custom-Bold.ttf") format("truetype"), url("../fonts/Custom-Bold.svg") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
@font-face {
    font-family: 'Custom';
    src: url("../fonts/Custom-Heavy.eot");
    src: local("☺"), url("../fonts/Custom-Heavy.woff") format("woff"), url("../fonts/Custom-Heavy.ttf") format("truetype"), url("../fonts/Custom-Heavy.svg") format("svg");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
Solution

  • The recommendation is to apply the preload to your link tags, not in the style itself.

    So for instance if your css code is in a file called "fonts.css", you would put the following line in the HTML where you are going to access it:

    <link rel="preload" as="style" href="fonts.css">

    You would then be telling the page to preload your "fonts.css" file. The "as" here should be whatever the actual resource is, so if instead of a style sheet you actually wanted to use a font file, just change the "as='style'" to "as='font'".