Используйте локальный шрифт в Next.js ⇐ CSS

[Anonymous]

Я изо всех сил пытаюсь заставить локальный шрифт работать на моем веб-сайте Next.js и не могу найти много информации о нем. Я использовал @font-face в своей таблице стилей globals.css. (Я ссылался на https://kirazhang.com/posts/nextjs-custom-fonts).

Код: Выделить всё

@font-face {
font-family: "Adobe Caslon Pro";
src: url("/static/fonts/ACaslonPro-Regular.otf") format("opentype");
font-style: medium;
font-display: swap;
}

затем в _app.js

Код: Выделить всё

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
return ;
}

export default MyApp;

Я также добавил файл _document.js в папку моих страниц

Код: Выделить всё

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}

render() {
return (








);
}
}

export default MyDocument;

Когда все сказано и сделано, при просмотре веб-страницы я получаю Times in New Roman.

Подробнее здесь: https://stackoverflow.com/questions/701 ... in-next-js