Local fonts
Most pages we build with Forge will be using custom fonts. Often these are different for headings contra body text.
Adding a local font and applying it to everything is done like this:
1. Add the font to the project
Get the .woff files from the designer and add them to the src/fonts folder in the project. Create the folder if it doesn’t exist.
2. Import the font
Open src/app/layout.tsx and add the following, replacing the font name and other properties with the one you’re using:
import localFont from "next/font/local";
const nohemi = localFont({
variable: "--font-nohemi",
src: [
{
path: "../fonts/Nohemi-Bold.woff",
weight: "700",
style: "normal",
},
{
path: "../fonts/Nohemi-SemiBold.woff",
weight: "600",
style: "normal",
},
{
path: "../fonts/Nohemi-Regular.woff",
weight: "400",
style: "normal",
},
],
});And on the <body> element add the class names like this:
<html lang="en">
<GoogleTagManager />
<body
className={`${inter.className} ${inter.variable} ${nohemi.variable}`} // <---
>
<DraftMode />
<Navigation />
<main>{children}</main>
<Footer />
</body>
</html>3. Set the font in the CSS variables
Open up src/app/globals.scss and find the body selector. In a clean Forge project it should look something like;
body {
/* Fonts */
--font-headings: var(--font-inter);
--font-paragraphs: var(--font-inter);
--font-family-monospace: "monopace";
}Change the --font-headings variable to the one you just created. In this case --font-nohemi.