localFont seems to only preload the last font if you're using more than one font.

Question

The issue I seem to be facing is when I have more than one localFont being used, the last localFont call is the ony that gets preloaded. My understanding is that all fonts are preloaded by default. I looked through the docs to see if I was missing something. My goal is to just have these two fonts preloaded so there is no visual flicker while the font that doesn't seem to have preloaded, is fetched. Thanks!

I have the following code:
fonts.ts

import localFont from "next/font/local";

const funnelDisplay = localFont({
  src: "funnelDisplay.woff2",
  display: "swap",
  variable: "--font-funnel-display"
});

const morrisRoman = localFont({
  src: "morrisRoman.woff2",
  display: "swap",
  variable: "--font-morris-roman"
});

export { funnelDisplay, morrisRoman };

layout.tsx

import type { Metadata } from 'next'
import type { ReactNode } from "react";
import { funnelDisplay, morrisRoman } from "@/fonts/fonts";
import './globals.scss'

export const metadata: Metadata = {
  title: 'Dungeon Shadows',
  description: 'A tabletop MMO',
}

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={`${morrisRoman.className} ${funnelDisplay.className} flex h-full`}>
        {children}
      </body>
    </html>
  )
}

Burmese · Accepted Answer

It looks like if I add --turbopack to my "dev": "next dev" script in package.json, it is preloads both local fonts, removing the flickering on initial load. Thanks!

localFont seems to only preload the last font if you're using more than one font.

1 Reply