Do I Need to Declare a WOFF2 Font in CSS If I Preload It?

General
,
1

I have several small WOFF2 font files, each ranging from 15 to 20 KB, and I’m considering preloading them to mitigate the font swap issue. When the page loads, I occasionally notice a blank space or a glitch where the heading momentarily displays the old font before transitioning to the new one. It’s quite frustrating, and since I only have three small font files, I believe preloading would be a more effective approach.

My question is, if I preload these fonts, is it still necessary to specify them in the CSS @font-face rule? Or does preloading cover all of that?

I’ve included the following in the section:

<link rel="preload" href="fonts/inter-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

And I removed this from my CSS file:

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/inter-v18-latin-regular.woff2") format("woff2");
}

However, it doesn’t seem to be working when I test it locally, and I’m wondering if that could be due to the crossorigin attribute. Additionally, I’m not entirely sure if I’m using the correct font name. I’ve been referencing it as “Inter” in my CSS, but it may be registered under a different name. Is there a way to check the actual name used in the WOFF2 file?

2

To ensure your WOFF2 fonts are loaded correctly and to resolve the issues you’re experiencing, here’s a step-by-step guide:

1. Use the @font-face Rule

Even if you preload the fonts, you still need to define them using the @font-face rule. Preloading does not replace the need for this definition because it tells the browser how to use the font (e.g., its name, style, and source).

2. Keep the Preload Link

Maintain your preload link to optimize loading time:

<link rel="preload" href="fonts/inter-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

3. Define the @font-face in Your CSS

Ensure your CSS contains the @font-face rule like so:

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/inter-v18-latin-regular.woff2") format("woff2");
}

4. Check Cross-Origin Issues

If your local environment doesn’t support the crossorigin attribute, try removing it temporarily to see if it resolves the issue:

<link rel="preload" href="fonts/inter-v18-latin-regular.woff2" as="font" type="font/woff2">

If you plan to host this on a server, ensure it’s configured to handle CORS correctly if you decide to include the crossorigin attribute later.

5. Verify the Font Name

To check the actual name used in the WOFF2 file, you can use a font viewer or editor like:

  • FontForge: Open the WOFF2 file in FontForge, and you can see the font family name and other metadata.
  • Online Tools: Websites like Transfonter allow you to upload the WOFF2 file and view its details.

6. Test Changes

After making these adjustments, test your changes in a local server environment (like using Live Server in VS Code, XAMPP, or MAMP) to properly handle CORS and file paths.

feel free to ask.