I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup:
Inside my _app.js file:
<Head>
<link
rel="preload"
href="/fonts/leira/Leira-Lite.ttf"
as="font"
crossOrigin="anonymous"
type="font/ttf"
/>
</Head>
In my globals.scss file:
@font-face {
font-family: "Leira";
src: url("/fonts/leira/Leira-Lite.ttf");
font-weight: normal;
font-style: normal;
}
However, this setup is not functioning correctly. The console in Firefox shows an error message saying "The resource at “url/fonts/leira/Leira-Lite.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.". It appears that the issue lies in the hashing of the font file, but I haven't been able to find a solution to this problem yet.