reactjsnext.jstailwind-cssgoogle-fontsnext.js14

NextJS - Google Inter font not working on website

I'm working on a NextJS project. I want to use the Inter font on my website, but when I do the 'npm run dev'; the font on my website is something similar to Times New Roman? Definitely not the Inter font.

My ./app/layout.tsx file:

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Nav } from 'components/Nav';
import { Footer } from 'components/Footer';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html 
      lang="en"
      suppressHydrationWarning={true}
      className={'${inter.variable} font-sans min-w-[360px] scroll-smooth md:overflow-x-scroll'}
    >
      <body>
        <Nav />
        <main 
          id='content'
          className='${inter.variable} font-sans'
        >
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

And a

This is my tailwind.config.ts file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
      },
    },
  },
  plugins: [],
}

My global.css file is empty.

This is example of the font that renders in my localhost: enter image description here

Solution

  • The problem is with your className

     <html 
  lang="en"
  suppressHydrationWarning={true}
  className={"${inter.variable} font-sans min-w-[360px] scroll-smooth md:overflow-x-scroll"}
>

    You need to add template literals `` instead of String literals""

    Corrected Code:

     <html 
  lang="en"
  suppressHydrationWarning={true}
  className={`${inter.variable} font-sans min-w-[360px] scroll-smooth md:overflow-x-scroll`}
>