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

1 messages · Page 1 of 1 (latest)

soft mural
#

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


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>
  )
}```
unique badgerBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

soft mural
#

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!