It looks like you’re preloading fonts in your custom WordPress theme, but they aren’t being used immediately after the page loads. This can happen if:

  1. CSS isn’t referencing the preloaded font – Your @font-face rule might not be properly set up or isn’t being applied to any elements on initial load.
  2. The as value in the <link> tag is incorrect – When preloading fonts, it should be as="font" and type="font/woff2" or type="font/woff".
  3. The font isn’t used right away – If no text elements use the font early in rendering, the browser considers the preload unnecessary.
  4. You’re loading multiple font formats – If one format (e.g., .woff2) is used before .woff, the latter might never be loaded.

Fixes to Try:

1. Ensure Correct Preload Syntax

Make sure you’re using the correct <link> syntax in your WordPress theme:

htmlCopyEdit<link rel="preload" href="https://shopclayspacebk.local/wp-content/themes/swagdrip/font/NeueHaasDisplay-Thin.woff2" as="font" type="font/woff2" crossorigin="anonymous">

If you’re also preloading .woff, make sure you have:

htmlCopyEdit<link rel="preload" href="https://shopclayspacebk.local/wp-content/themes/swagdrip/font/NeueHaasDisplay-Thin.woff" as="font" type="font/woff" crossorigin="anonymous">

2. Verify @font-face Usage

Check that your CSS correctly declares the font:

cssCopyEdit@font-face {
    font-family: 'Neue Haas Display';
    src: url('https://shopclayspacebk.local/wp-content/themes/swagdrip/font/NeueHaasDisplay-Thin.woff2') format('woff2'),
         url('https://shopclayspacebk.local/wp-content/themes/swagdrip/font/NeueHaasDisplay-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap; /* Helps prevent blocking */
}

Then, ensure it’s applied to a visible element immediately:

cssCopyEditbody {
    font-family: 'Neue Haas Display', sans-serif;
}

3. Ensure the Font is Used Immediately

If the font is applied via JavaScript (like in a dynamically loaded component), the preload might be considered unnecessary. Try applying the font in your main stylesheet instead of dynamically adding it later.

4. Check for Conflicting Font Loading

If your Rollup/NPM setup includes multiple font-loading methods (e.g., a Google Fonts request, a different @font-face rule, or a CDN), the preloaded font might not be used.

5. Try Delaying or Removing Preload

If the warning persists and performance isn’t affected, consider removing the preload or loading it asynchronously.

Debugging Further

  • Open DevTools (F12 or Cmd + Option + I on Mac).
  • Go to the Network tab → Check if the font file is being downloaded twice.
  • Check the Rendering tab in DevTools to see if the font is applied correctly.

Let me know if you need more troubleshooting! 🚀