Next.js не может применить шрифт к тексту ⇐ CSS

[Anonymous]

Я начинаю новый проект с NextJS (версия 14.2.13). Я создал проект с помощью create-next-app, затем импортировал два шрифта из шрифтов 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/layout.tsx
import {montserrat, open_sans} from './fonts'
import "./globals.css";

export default function RootLayout({
children,
}: Readonly) {
return (


{children}


);
}

Однако что-то не работает.

• При применении шрифта к элементу шрифт не применяется. :

.app/page.tsx
import {montserrat} from "./fonts";

export default function Home() {
return (

Hello World

);
}

• При определении в глобальной таблице стилей переменные не существуют. это выдает предупреждение eslint в IDE, а инструменты разработчика браузера возвращают сообщение о том, что переменная не определена при проверке.

.app/globals.css
h1 {
font-family: var(--font-open-sans);
}

h6 {
font-family: var(--font-montserrat);
}

Почему мои шрифты не применяются? Добавлю, что я просмотрел официальную документацию, но в лучшем случае ее не хватает, даже если следовать букве.
Любая помощь будет очень признательна.
Изменить:
Я добавляю свои файлы конфигурации, на всякий случай, если они дадут какую-либо информацию
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./app",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./app/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

tailwind.config.ts
импортировать тип { Config } из "tailwindcss";
const config: Config = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
};
export default config;


Подробнее здесь: https://stackoverflow.com/questions/791 ... nt-to-text