Next.js Discord

Discord Forum

Font is falling back unexpectedly to local Helvetica

Unanswered
Savannah posted this in #help-forum
Open in Discord
SavannahOP
I have tried literally every single combo I could, not sure what is happening.

There might be cases that the correct font is applied, but after some refreshes it get again to the Helvetica.

3 Replies

Western paper wasp
Can you post some code that produces the issue?
SavannahOP
Tried to create a repro repository with the CLI, but will a vanilla Next its not happening @Western paper wasp so not sure exactly what is the issue.

the layout file looks like:

import "./css/style.css";

import {
  Inter,
  Geologica,
  Space_Grotesk,
  Hanken_Grotesk,
  DM_Sans,
} from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

const geologica = Geologica({
  subsets: ["latin"],
  variable: "--font-playfair-display",
  display: "swap",
});

const space = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-space",
  display: "swap",
});

const hanken = Hanken_Grotesk({
  subsets: ["latin"],
  variable: "--font-hanken",
  display: "swap",
});

const dm = DM_Sans({
  subsets: ["latin"],
  weight: ["500", "700"],
  variable: "--font-dm",
  display: "swap",
  adjustFontFallback: false,
});

export const metadata = {
  title: "DBtune",
  description: "Autonomous database tuning",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        className={`${inter.variable} ${geologica.variable} ${space.variable} ${hanken.variable} ${dm.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}
      >
        {children}
      </body>
    </html>
  );
}
When I test the new canary the issue I think goes away