Свойства переменных NextFont невозможно применить к глобальному CSS с помощью var() ⇐ CSS

[Anonymous]

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

// font.ts file

import { Quicksand, Syncopate } from 'next/font/google';

export const quickSandRegular = Quicksand({
subsets: ['latin'],
variable: '--font-quicksand-reg',
weight: '400',
display: 'swap',
});
export const quickSandSmBold = Quicksand({
subsets: ['latin'],
variable: '--font-quicksand-smbold',
weight: '600',
display: 'swap',
});

export const syncopateRegular = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-reg',
weight: '400',
display: 'swap',
});

export const syncopateBold = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-bold',
weight: '700',
display: 'swap',
});

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

//layout.tsx file

import {
quickSandRegular,
quickSandSmBold,
syncopateBold,
syncopateRegular,
} from '@/lib/fonts';

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


{children}


);
}

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

// global.css file
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
.card {
& .header {
font-family: var(--font-syncopate-reg);
@apply center;
}
}
}

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

// page.tsx file

export default function CustomerList() {
return (

RIMIX

)
}

Я пытался использовать переменную NextFont в своем CSS-файле, но изменить семейство шрифтов не удалось.
Итак, согласно документации NextJs, Я мог бы изменить семейство шрифтов текста, указав в моем CSS-файле определенное имя переменной.

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

const syncopateRegular = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-reg', /** using this in global css file in var() */
weight: '400',
display: 'swap',
});

Но шрифт моего текста остался прежним.
Изначально я думал, что проблема в том, что я по ошибке использовал .className вместо суффикса .variable для шрифты были вставлены в Root Layout, но это было не так.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -using-var