The smart way to handle multiple fonts in NextJS Version 14/15 Upwards

Tomilola OluwafemiTomilola Oluwafemi
2 min read

Table of contents

Optimizing: Fonts | Next.js

Font management in web applications can be challenging, especially when dealing with multiple typefaces. Next.js 14 and 15 introduce powerful font optimization techniques that simplify this process while maintaining performance and design flexibility.

How we used to manage font in NextJS

Traditional Challenges

Before Next.js 14, developers faced several font-related challenges:

  • Manual font loading impacts performance

  • Increased page load times

  • Inconsistent cross-browser rendering

  • Complex CSS and @font-face management

Next.js Font Optimization

Next.js now provides a next/font a module that automatically optimizes your fonts (including custom fonts) and removes external network requests for improved privacy and performance. It provides:

  • Automatic self-hosting

  • Zero performance overhead

  • Built-in font optimization

  • Simplified configuration

Best Practices for Using Multiple Fonts

Step 1: Ensure Next.js Fonts is installed in your application.

npm install @next/font

Step 2: Import your desired fonts in your main layout.tsx file

import { Inter } from 'next/font/google'
import { Sora } from 'next/font/google'

// Configure font weights and subsets
const inter = Inter({ 
  subsets: ['latin'],
  weight: ['400', '700']
})

const sora = Sora({
  subsets: ['latin'],
  weight: ['400', '600']
})

Step 3: Add fonts to the main HTML tag to apply it Globally

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.className} ${sora.className}`}>
      <body>{children}</body>
    </html>
  )
}

Step 4: Ensure to add your main font’s className to the body tag.

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.className} ${sora.className}`}>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Include other Fonts to fontFamily settings in your tailwindconfig.ts

Next.js supports variable fonts, allowing more granular control:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'inter': ['var(--font-inter)', 'sans-serif'],
        'sora': ['var(--font-sora)', 'sans-serif']
      }
    }
  }
}

Common Pitfalls to Avoid

  1. Over-importing: Don't load unnecessary font weights

  2. Ignoring Subset Selection: Choose appropriate language subsets

  3. Forgetting Fallback Fonts: Always provide system font fallbacks

Conclusion

Next.js 14/15's font handling transforms typography management from a complex task to a streamlined, performance-optimized process. By using next/font, developers can create visually stunning, fast-loading web applications with minimal configuration overhead.

Key Takeaways

  • Automatic font optimization

  • Zero runtime performance cost

  • Simplified font management

  • Enhanced design flexibility

Resources

1
Subscribe to my newsletter

Read articles from Tomilola Oluwafemi directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Next.jsfontsWeb DevelopmentDeveloperProgramming Blogs

Written by

Tomilola Oluwafemi
Tomilola Oluwafemi

I craft blazingly fast software solutions while optimising for costs; Software Engineer | Backend + Frontend → Full Stack Developer