Next.js 13.4 Fonts Optimization Step by Step 🔥

This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your st...

MOHAMMED DAKIR| December 4, 2023

next.js

#Next.js #Dev #Fonts #JavaScript

Google Fonts

Automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. No requests are sent to Google by the browser.

Get started by importing the font you would like to use from next/font/google as a function. We recommend using variable fonts

for the best performance and flexibility.

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'],
 display: 'swap',
})
 
export default function RootLayout({ children }) {
 return (
  <html lang="en" className={inter.className}>
   <body>{children}</body>
  </html>
 )
}

if you can't use a variable font you will ned to specify weight

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
 weight: '400',
 subsets: ['latin'],
 display: 'swap',
})
 
export default function RootLayout({ children }) {
 return (
  <html lang="en" className={roboto.className}>
   <body>{children}</body>
  </html>
 )
}

You can specify multiple weights and/or styles by using an array:

const roboto = Roboto({
 weight: ['400', '700'],
 style: ['normal', 'italic'],
 subsets: ['latin'],
 display: 'swap',
})

with Tailwind CSS

In the example below, we use the font Inter from next/font/google (you can use any font from Google or Local Fonts). Load your font with the variable option to define your CSS variable name and assign it to inter. Then, use inter.variable to add the CSS variable to your HTML document.

import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-roboto-mono',
})
 
export default function RootLayout({ children }) {
 return (
  <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
   <body>{children}</body>
  </html>
 )
}
/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
  './pages/**/*.{js,ts,jsx,tsx}',
  './components/**/*.{js,ts,jsx,tsx}',
  './app/**/*.{js,ts,jsx,tsx}',
 ],
 theme: {
  extend: {
   fontFamily: {
    sans: ['var(--font-inter)'],
    mono: ['var(--font-roboto-mono)'],
   },
  },
 },
 plugins: [],
}