I am currently utilizing next.js.
My objective is to ensure that the fonts are loaded before any content is displayed on the screen.
I attempted to achieve this by including them in the Head component within the _.document file using the rel="preload" attribute.
<link
rel="preload"
href="/public/fonts/Mulish-ExtraBold.ttf"
as="font"
type="font/ttf"
crossOrigin="anonymous"
></link>
To do this, I created a public directory at the root level with a font sub-directory inside it. Then, in the link tag, I specified the href attribute like shown above:
href="/public/fonts/Mulish-ExtraBold.ttf"href="/public/fonts/Mulish-ExtraBold.ttf"
However, it appears that this setup is not functioning as anticipated.
The code for my _.document.tsx file is as follows:
import Document, { Head, Html, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
rel="preload"
href="/public/fonts/Mulish-ExtraBold.ttf"
as="font"
type="font/ttf"
crossOrigin="anonymous"
></link>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
What could be the issue here?