Нет пользовательского шрифта страницы

Предотвращение пользовательских шрифтов только для страницы.

Почему возникла эта ошибка

Пользовательский шрифт, который вы добавляете, был добавлен на страницу — это добавляет шрифт только на определенную страницу, а не во всё приложение.
Пользовательский шрифт, который вы добавляете, был добавлен в отдельный компонент в pages/_document.js — это отключает автоматическую оптимизацию шрифтов.

Возможные способы исправить

Создайте файл ./pages/_document.js и добавьте шрифт в пользовательский документ:

import Document, { Html, Head, Main, NextScript } from 'next/document'
 
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
 
export default MyDocument

Или как компонент функции:

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Когда не следует использовать

Если у вас есть причина загружать шрифт только для определенной страницы или вас не интересует оптимизация шрифтов, вы можете отключить эту проверку.

Нет пользовательского шрифта страницы

Почему возникла эта ошибка

Возможные способы исправить

Когда не следует использовать

Полезные ссылки