I’m trying to use two fonts. One is only obtainable locally, the other could be sourced from Google Fonts if necessary.
I’ve followed the instructions in the documentation to the best of my ability, but I only seem to be able to get one font to load on the page. Using the code below, only Geomanist loads.
Code in my layouts.tsx file:
import type { Metadata } from "next";
import Roboto_Condensed from '@next/font/local'
import Geomanist from '@next/font/local'
const Roboto = Roboto_Condensed({
src: [
{
path: '../../public/fonts/RobotoCondensed-VariableFont_wght.ttf',
}
],
variable: '--font-roboto-condensed'
})
const geomanist = Geomanist({
src: [
{
path: '../../public/fonts/Geomanist-Regular.ttf',
weight: '400'
},
{
path: '../../public/fonts/Geomanist-Book.ttf',
weight: '500'
}
],
variable: '--font-geomanist'
})
import "./globals.scss";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${Roboto.className} ${geomanist.className}`}>{children}</body>
</html>
);
}
Code in my globals.scss file:
h1{
font-family: var(--font-roboto-condensed);
text-transform: uppercase;
font-weight: 800;
font-size: 96px;
}
.subtitle {
font-family: var(--font-geomanist);
font-weight: 400;
font-size: 35px;
}
Would appreciate any help given, I’m new to next.js.