Optimizing Font Management in Next.js: Transitioning from Google Fonts to next/font Custom Fonts

Last updated: June 22, 2026

Problem Statement

Design Extensions' Google Fonts integration is great for fast iteration, but in production it leaves font loading unoptimized. Moving to next/font reduces render-blocking requests and gives you control over weights, subsets, and font display — while registering the fonts as "custom" in Design Extensions keeps their names available as parameters.

Solution

1. Define fonts with next/font

Create a file (e.g. fonts/index.ts) that configures your fonts and exports their CSS variables:

import { DM_Sans, Space_Mono } from 'next/font/google';

export const dm_sans = DM_Sans({
  subsets: ['latin'],
  variable: '--dm-sans',
  display: 'swap',
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
  style: ['italic', 'normal'],
  preload: true,
});

export const space_mono = Space_Mono({
  subsets: ['latin'],
  variable: '--space-mono',
  display: 'swap',
  weight: ['400', '700'],
  style: ['italic', 'normal'],
  preload: true,
});

export const customFontVariables = [dm_sans.variable, space_mono.variable].join(' ');

  • subsets, weight, and style limit the font data to what you actually use.

  • preload and display: 'swap' load fonts without blocking rendering, showing a fallback font until they are ready.

2. Apply the fonts globally in the layout

In your global layout (e.g. app/layout.tsx), add the font variables to the <body> element so the fonts are available across the whole application:

import { customFontVariables } from '../fonts';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={customFontVariables}>
        <NextThemeProvider attribute="class" defaultTheme="light" enableSystem>
          <UniformContext>{children}</UniformContext>
        </NextThemeProvider>
      </body>
    </html>
  );
}

3. Switch Design Extensions to "custom" fonts

Remove the previously configured Google Fonts from Design Extensions and re-add them as custom fonts, keeping the Name identical to your earlier setup so existing styling and Theme Pack 2 parameters keep working.

Before updating to custom fonts:

optimizing-font-management-in-nextjs-theme-pack-2-before.png

After updating to custom fonts:

optimizing-font-management-in-nextjs-theme-pack-2-after.png

Troubleshooting

Verify it works: run the app and confirm the fonts render without a flash of invisible text, the font names still appear as parameters in Design Extensions, and no Google Fonts stylesheet requests remain.

Fonts not applied: make sure customFontVariables is set on the <body> element and the CSS variable names (--dm-sans, --space-mono) match what your theme references.

Styling broke after the switch: the custom font's Name in Design Extensions must exactly match the name used in the previous Google Fonts setup.