Шрифты Next.js в таблице стилей CSS ⇐ CSS

[Anonymous]

Я начинаю новый проект с NextJS (версия 14.2.13). Я импортировал два шрифта из шрифтов Google, используя следующий код:

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

./app/fonts.ts

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

import { Montserrat, Open_Sans } from 'next/font/google'

export const montserrat = Montserrat({
subsets: ['latin'],
variable: '--font-montserrat',
display: 'swap',
});

export const open_sans = Open_Sans({
subsets: ['latin'],
variable: '--font-open-sans',
display: 'swap',
});

А при применении шрифта к элементу всё работает нормально:

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

.app/page.tsx

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

import {montserrat} from "./fonts";

export default function Home() {
return (

Hello World

);
}

Однако, поскольку мое приложение становится очень большим, я хотел бы применить глобальный стиль. Как я могу сделать что-то вроде:

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

.app/globals.css

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

h1 {
font-family: "open-sans";
}

h6 {
font-family: "montserrat";
}

и шрифты, которые я импортировал с помощью Next.js, применяются глобально ко всем элементам h1 и h6 соответственно?
Я добавлю, что я был через официальную документацию, но в лучшем случае ее нет. следовать этому письму у меня не сработало.

Подробнее здесь: https://stackoverflow.com/questions/791 ... stylesheet