User-Defined Preload for assets (font, image, etc.) in HTML-Head using app router
Unanswered
mowcowanu posted this in #help-forum
Small question using App router: is there a way to add a preload tag to the header for a custom font which is located in a CDN? We tried adding it directly to the <head> which leads to hydration errors, we tried using localFont but this doesn't work as it's not a local font but served from a CDN like:
We don't want to move the font from the CDN to the NEXT-Server
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<link
rel={'preload'}
href={'https://our-cdn.azureedge.net/MyAwesomeFont.woff2'}
as={'font'}
type="font/woff2"
crossOrigin={'anonymous'}
/>
We don't want to move the font from the CDN to the NEXT-Server
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<link
rel={'preload'}
href={'https://our-cdn.azureedge.net/MyAwesomeFont.woff2'}
as={'font'}
type="font/woff2"
crossOrigin={'anonymous'}
/>