2

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;
  }
COS
  • 505
  • 2
  • 4
  • 22
  • Does this answer your question? [Preloading Google Fonts](https://stackoverflow.com/questions/50824181/preloading-google-fonts) – Gosi Jul 23 '20 at 08:19

1 Answers1

1

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'".

TheWriter
  • 256
  • 1
  • 5
  • Ah that makes sense. I have the @font-face inside my main style.css file. I should probably move it into its own css file. – COS Jul 23 '20 at 08:24
  • 5
    Note that this will preload the CSS file only, not the actual font files – David May 06 '21 at 12:43