Coffee?

Next.js – change font family

To change the font of your Next.js app efficiently, you can use the following methods:

1. Use the Built-in next/font Module

Next.js provides the next/font module for optimizing and managing fonts. It allows you to include Google Fonts or local fonts with performance enhancements, like automatic font subset optimization.

Steps for Google Fonts

  1. Install the Font Package:
   npm install @next/font
  1. Use a Google Font in Your App:
    Modify your layout.js or pages/_app.js file:
   import { Inter } from 'next/font/google';

   const inter = Inter({ subsets: ['latin'] });

   export default function RootLayout({ children }) {
       return (
           <html lang="en">
               <body className={inter.className}>{children}</body>
           </html>
       );
   }
  1. Apply the Font Globally:
  • The inter.className automatically applies the font style globally.

Steps for Custom or Local Fonts

If you have a custom font file, you can use the next/font/local import:

  1. Store Your Font File:
    Place your font files in the public/fonts folder.
  2. Use the Font in Your Code:
   import localFont from 'next/font/local';

   const myFont = localFont({
       src: './fonts/MyFont-Regular.woff2',
       variable: '--font-myfont',
   });

   export default function RootLayout({ children }) {
       return (
           <html lang="en">
               <body className={myFont.className}>{children}</body>
           </html>
       );
   }
  1. CSS Custom Properties for Further Styling:
    You can define a variable for the font (e.g., --font-myfont) and use it in your global CSS:
   :root {
       --font-myfont: 'MyFont', sans-serif;
   }

   body {
       font-family: var(--font-myfont);
   }

2. Use a CSS Framework (e.g., Tailwind CSS)

If you are using Tailwind CSS, you can configure your font in tailwind.config.js:

  1. Install the Font via Tailwind or Manually Add It:
   npm install @tailwindcss/typography
  1. Modify the Tailwind Configuration:
   module.exports = {
       theme: {
           extend: {
               fontFamily: {
                   sans: ['Inter', 'sans-serif'],
               },
           },
       },
       plugins: [require('@tailwindcss/typography')],
   };
  1. Apply the Font:
    Use font-sans in your components or globally in the html or body tags.

3. Use Global CSS

If you want to manage fonts directly in a CSS file:

  1. Add a Global CSS File:
    Create a styles/globals.css file if it doesn’t exist.
  2. Import the Font Using @import in CSS:
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

   body {
       font-family: 'Inter', sans-serif;
   }
  1. Import the CSS File in _app.js:
   import '../styles/globals.css';

   export default function MyApp({ Component, pageProps }) {
       return <Component {...pageProps} />;
   }

Comparison of Methods

MethodPerformanceEase of UseNotes
next/font✅ Best✅ EasyBuilt-in optimization, font subsetting, ideal for most cases
Tailwind CSS Framework✅ Good✅ EasyWorks well if using Tailwind, but adds dependency
Global CSS with Google⚠️ Okay✅ EasyNo optimization; rely on Google Fonts’ CDN

Recommendation

The next/font module is the most efficient way to manage fonts in Next.js, offering optimal performance and seamless integration. Use it unless you have a specific reason to manage fonts differently.

adminwp