Next.js Discord

Discord Forum

Using app router fonts

Unanswered
Sully posted this in #help-forum
Open in Discord
SullyOP
I'm trying to use Next.JS (v14.0.1) app router fonts, specifically import { Poppins } from 'next/font/google'; using
import { Poppins } from 'next/font/google';

...

const poppins = Poppins({
    display: 'swap',
    subsets: ['latin'],
    style: ['normal', 'italic'],
    weight: ['300', '400', '500', '600', '700', '800', '900'],
    preload: true,
});

...

<html className={poppins.className} lang='en'>

but I notice, I cannot use Poppins in my font-family CSS, but rather have to call __Poppins_f49c4b, why and how do I fix that?

1 Reply

Torymid wasp
You can add a CSS variable by adding: variable: "--font-poppins" to the const poppons and then poppins.variable to the <html className>