Preload custom font with Next.js

tux_tina

Greetings Stack Overflow community! I'm using some custom fonts in my Next.js project using the following CSS: @font-face { font-family: OpenSans; font-display: swap; src: url(./OpenSans-Regular.woff2) format('woff2'); } The thing is that Lighthouse audit it's telling me to preload these .woff2 files but they are getting hashed by Next.js. I don't know how to add the link tag with rel="preload" for the fonts. Where can I tell Next.js to preload...

Originally asked by Daniel Ramos on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

In newer versions of Next.js this answer is not relevant anymore. But if you are still using old Next.js versions (before app router) this could be useful. The problem is in Next.js, that the font files get compiled if you place them in any other folder besides public. So if you place them in the public folder and reference them manually, you can be using the link preload like below. Include them in the Head tag and specify the type for the different font types for browser compatibility. Make sure to reference them correctly in the css as well. <Head> <link rel="preload" href="/fonts/yourfont/yourfont.woff2" as="font" crossOrigin="" type="font/woff2" /> </Head> @font-face { font-family:...

Full answer by Hendrik Vlaanderen: https://stackoverflow.stackexchange.com/a/65295319 (CC BY-SA 4.0).

Need it done for your business? UphillTech.