'How to preload local fonts using next.js

I'm using next.js.

I want to load the fonts before the content is painted on the screen.
I tried to add them in the Head component in _.document file with rel="preload"

<link
        rel="preload"
        href="/public/fonts/Mulish-ExtraBold.ttf"
        as="font"
        type="font/ttf"
        crossOrigin="anonymous"
      ></link>

I added a public directory in the root and a font directory inside of it and then as a href the link tag like this as you can see abovehref="/public/fonts/Mulish-ExtraBold.ttf" as you see.

href="/public/fonts/Mulish-ExtraBold.ttf"

But it doesn't seem to work as expected

here is _.document.tsx file

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 am i missing?

javascriptcsstypescriptnext.jsstyled-components


Solution 1:[1]

Just remove /public that will fix your issue

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ace Uy

Related Questions