Integrating Multiple Google Fonts in a Next.js 14 Project: A Step-by-Step Guide

5 min readJun 26, 2024

In modern web development, typography plays a crucial role in enhancing the user experience and visual appeal of your application. Google Fonts offers a vast selection of free, high-quality fonts that you can easily integrate into your project. In this guide, we’ll walk through the process of integrating multiple Google Fonts into a Next.js project using the next/font/google library. We'll use the Indie_Flower and Ruda fonts as examples.

Why Use Google Fonts with Next.js?

Wide Selection: Google Fonts offers a diverse collection of fonts suitable for any project.
Ease of Use: The next/font/google library simplifies the process of importing and using Google Fonts in your Next.js application.
Performance: Optimized font loading ensures your application remains fast and responsive.

Step-by-Step Integration

Setting Up the Fonts in RootLayout

First, let’s configure both Indie_Flower and Ruda fonts directly within our RootLayout component. This will make the fonts available globally throughout the application.

Import and Configure the Fonts:

import { Ruda, Indie_Flower } from 'next/font/google';

const indie = Indie_Flower({
  subsets: ["latin"],
  variable: "--font-indie",
  weight: "400",
});

const ruda = Ruda({
  subsets: ["latin"],
  variable: "--font-ruda",
  weight: "400", // Choose the appropriate weight as per the Google Fonts page
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${indie.variable} ${ruda.variable}`}>
        {children}
      </body>
    </html>
  );
}

Explanation:

Importing Fonts: We import Ruda and Indie_Flower from next/font/google.
Configuring Fonts: We configure each font with the required subsets, a CSS variable, and weight. The CSS variables (--font-indie and --font-ruda) allow us to use these fonts in our global styles.
Applying Fonts Globally: Both CSS variables are applied to the <body> tag, making them available throughout the application.

2. Define CSS Variables in globals.css

Next, update your global CSS file to define the CSS variables and create classes for each font. This ensures that the fonts are applied correctly across the entire application.

Update globals.css:

:root {
  --font-indie: 'Indie Flower', cursive;
  --font-ruda: 'Ruda', sans-serif;
}

.indie {
  font-family: var(--font-indie);
}

.ruda {
  font-family: var(--font-ruda);
}

Explanation:

Global Variables: The :root selector defines global CSS variables --font-indie and --font-ruda.

Font Classes: We create .indie and .ruda classes that apply their respective fonts using the CSS variables. This approach keeps our styles clean and easily maintainable.

3. Apply the Fonts to Specific Elements

Now, you can apply the indie and ruda classes to any element where you want to use these fonts.

Example Component:

function MyComponent() {
  return (
    <div>
      <div className="indie">
        This text will use the Indie Flower font.
      </div>
      <div className="ruda">
        This text will use the Ruda font.
      </div>
    </div>
  );
}

export default MyComponent;

Explanation:

Applying Classes: In the MyComponent function, we return a div containing two child divs. The first child div uses the indie class, applying the Indie Flower font, while the second child div uses the ruda class, applying the Ruda font.
Easy Styling: By using the .indie and .ruda classes, you can easily apply the desired fonts to specific elements in your components.

Understanding Font Subsets

A font subset is a specific portion of the complete font character set. It includes only the characters required for a particular language or set of languages. When you load a font subset, you only download the characters you need, which can significantly reduce the size of the font file and improve the performance of your web application.

Why Are Subsets Important?

Performance Optimization: By loading only the characters needed for your application, you reduce the font file size, leading to faster page load times.

2. Reduced Bandwidth Usage: Smaller font files mean less data to download, which is especially beneficial for users on slower connections or with data limits.

3. Improved User Experience: Faster loading times contribute to a smoother and more responsive user experience.

Adding Font Subsets in Next.js

When configuring your fonts, you specify the required subsets in the configuration object:

const indie = Indie_Flower({
  subsets: ["latin"],
  variable: "--font-indie",
  weight: "400",
});

const ruda = Ruda({
  subsets: ["latin"],
  variable: "--font-ruda",
  weight: "400",
});

In the examples above, we use the "latin" subset, which includes characters commonly used in Western languages. Depending on your application's language requirements, you can choose different subsets (e.g., "cyrillic", "greek", "vietnamese").

Full Example

Here’s a recap of the entire setup:

layout.js

mport { Ruda, Indie_Flower } from 'next/font/google';

const indie = Indie_Flower({
  subsets: ["latin"],
  variable: "--font-indie",
  weight: "400",
});

const ruda = Ruda({
  subsets: ["latin"],
  variable: "--font-ruda",
  weight: "400",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${indie.variable} ${ruda.variable}`}>
        {children}
      </body>
    </html>
  );
}

globals.css

:root {
  --font-indie: 'Indie Flower', cursive;
  --font-ruda: 'Ruda', sans-serif;
}

.indie {
  font-family: var(--font-indie);
}

.ruda {
  font-family: var(--font-ruda);
}

MyComponent.js

function MyComponent() {
  return (
    <div>
      <div className="indie">
        This text will use the Indie Flower font.
      </div>
      <div className="ruda">
        This text will use the Ruda font.
      </div>
    </div>
  );
}

export default MyComponent;

Conclusion

By following these steps, you’ve successfully integrated multiple Google Fonts (Indie_Flower and Ruda) into your Next.js project. Using CSS variables and the next/font/google library makes your font management more efficient and your codebase cleaner. This method ensures that you can easily maintain and apply custom fonts throughout your application, enhancing the overall user experience and visual appeal. Moreover, understanding and using font subsets helps optimize performance, ensuring your application loads quickly and efficiently.

Share Your Approach

If you have another approach or method for integrating Google Fonts into a Next.js project, feel free to share it in the comments below. Your insights and experiences could be valuable to others in the community!

Enjoyed this article? Give it a thumbs up and share the knowledge with your fellow devs and friends! Keep an eye out for more juicy tips and tricks tutorials.

Hungry for the latest in web dev trends? Follow us for any updates. Let’s whip up some awesome web experiences together!