Как использовать несколько шрифтов в NextJS ⇐ CSS

[Anonymous]

У меня возникли проблемы с загрузкой нескольких веб-шрифтов Google в приложении NextJS. Я следую документации здесь.
В моем файле fonts.ts я определяю свои шрифты:

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

import { Inter, Heebo } from "next/font/google";

export const inter = Inter({ subsets: ["latin"], display: "swap" });
export const heebo = Heebo({ subsets: ['latin'], display: "swap" })

В моем макете.ts я определяю Inter глобально:

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

import type { Metadata } from "next";
import "./globals.css";
import { inter } from './fonts';

export const metadata: Metadata = {
title: "NextJS Stack Overflow Test.",
description: "Generated by create next app",
};

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

{children}

);
}

И у меня есть два тестовых заголовка в моем page.tsx, но шрифт для обоих — роботизированный:

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

import { heebo } from './fonts';

export default function Home() {
return (

Heebo
Roboto

);
}

Здесь есть репозиторий Github с NextJS с включенным выше кодом:
https://github.com/Freddie-Pike/nextjs_ ... k_overflow< /p>
Также развернуло приложение в Vercel для удобства тестирования:
https://nextjs-font-stack-overflow.vercel.app/
Кто-нибудь знает, что происходит?

Подробнее здесь: https://stackoverflow.com/questions/786 ... -in-nextjs