React Series #04: How to change the font in next.js project

Ramachandran S
React
August 16, 2024August 16, 2024

Changing the font and color is pretty easy in a next.js project.

Open app/layout.js

import { Inter } from 'next/font/google'
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({ children }) {
  return (
    <html lang="en">
    <body className={inter.className}>
      {children}
    </body>
  </html>
  )
}

You can change the default Inter to Roboto using this code

import { Roboto } from 'next/font/google'
// If loading a variable font, you don't need to specify the font weight
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})
export default function RootLayout({ children }) {
  return (
    <html lang="en">
    <body className={roboto.className}>
      {children}
    </body>
  </html>
  )
}

Update font to Poppins with all options

const poppins = Poppins({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-poppins",
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

You can use Google fonts and here is the Google Font’s official website.

Leave a Reply Cancel reply