I’m having trouble loading multiple Google Web fonts in a NextJS application. I’m following the documentation here.
In my fonts.ts I define my fonts:
import { Inter, Heebo } from "next/font/google";
export const inter = Inter({ subsets: ["latin"], display: "swap" });
export const heebo = Heebo({ subsets: ['latin'], display: "swap" })
In my layout.ts I define Inter globally:
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<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
And I have two test headings in my page.tsx but the font is roboto for both:
import { heebo } from './fonts';
export default function Home() {
return (
<>
<h1 className={`text-center ${heebo.className} white`}>Heebo</h1>
<h2 className='text-center white'>Roboto</h2>
</>
);
}
Got a Github Repo here with a NextJS with the code above included:
https://github.com/Freddie-Pike/nextjs_font_stack_overflow
Also deployed the app to Vercel for easy testing:
https://nextjs-font-stack-overflow.vercel.app/
Does anybody know what’s on the go?