nextjs font customization

Unanswered

bogscam posted this in #help-forum

2026-04-22T11:19:48.396Z

I’m trying to configure two fonts using next/font/google: one (Google Sans Flex) as the primary font for all languages, and another (Google Sans) specifically as a fallback for Greek. However, the fallback font isn’t being applied as expected, and I’m also unable to get the font weights to change correctly.

layout.tsx

import { Google_Sans, Google_Sans_Flex } from "next/font/google";

const gSansFlex = Google_Sans_Flex({
  subsets: ["latin"],
  display: "swap",
  weight: 'variable',
  preload: true,
  fallback: ["gSans"],
  adjustFontFallback: true
});

const gSans = Google_Sans({
  subsets: ["greek"],
  display: "fallback",
  weight: "variable",
  preload: true,
});

<html className={gSans.className}>
      <body className="text-white bg-black">{children}</body>
    </html>

page.tsx

return (
    <Layout lang={lang}>
      <h1 className="text-4xl font-light">{ui.home.title[lang]}</h1>
    </Layout>
  );

12 Replies

RxvxntxN

2026-04-22T17:00:01.077Z

Hello ,

isn't gSans.className on the html applying entire site to use the Greek font first? Also , are you sure that Google Sans is a variable font?

bogscamOP

2026-04-22T17:15:26.816Z

Yes, it does, but I don’t know another way to approach it. Google Sans is listed as variable both in fonts.google.com and in the next font node module

Palomino

2026-04-22T18:35:01.804Z

@bogscam

1. Neither Google_Sans nor Google_Sans_Flex support weight: "variable". They are not variable fonts despite the name. You need to specify explicit weights:

2. The fallback option in next/font is for generic CSS font-stack fallbacks

layout.tsx

import { Google_Sans, Google_Sans_Flex } from "next/font/google";

const gSansFlex = Google_Sans_Flex({
  subsets: ["latin"],
  display: "swap",
  weight: ["300", "400", "500", "700"],
  variable: "--font-primary",
});

const gSans = Google_Sans({
  subsets: ["greek"],
  display: "swap",
  weight: ["300", "400", "500", "700"],
  variable: "--font-greek",
});

<html className={`${gSansFlex.variable} ${gSans.variable}`}>
    </html>

3. You had gSans.className on <html> instead of combining both fonts. The fix above addresses this by switching to CSS variables and applying both via variable.

Sorry, I am on mobile. It was hard to type a snippet.

@Palomino <@661213741572161557> 1. Neither Google_Sans nor Google_Sans_Flex support weight: "variable". They are not variable fonts despite the name. You need to specify explicit weights: 2. The fallback option in next/font is for generic CSS font-stack fallbacks > layout.tsx javascript import { Google_Sans, Google_Sans_Flex } from "next/font/google"; const gSansFlex = Google_Sans_Flex({ subsets: ["latin"], display: "swap", weight: ["300", "400", "500", "700"], variable: "--font-primary", }); const gSans = Google_Sans({ subsets: ["greek"], display: "swap", weight: ["300", "400", "500", "700"], variable: "--font-greek", }); <html className={`${gSansFlex.variable} ${gSans.variable}`}> </html> 3. You had gSans.className on <html> instead of combining both fonts. The fix above addresses this by switching to CSS variables and applying both via variable.

bogscamOP

2026-04-22T19:25:13.557Z

I appreciate your effort in responding from a small screen.
Regarding your code snippet: how does the layout determine which font is treated as the primary font and which one acts as a fallback? Also, what is the purpose of assigning variable names to the fonts if those variables are not referenced elsewhere in the implementation?

@bogscam I appreciate your effort in responding from a small screen. Regarding your code snippet: how does the layout determine which font is treated as the primary font and which one acts as a fallback? Also, what is the purpose of assigning variable names to the fonts if those variables are not referenced elsewhere in the implementation?

Palomino

2026-04-23T00:27:48.379Z

next/font’s variable option exposes a CSS custom property you reference in your own CSS via font-family: var(--font-primary)

:lang(el) targets Greek content, body handles everything else

/* globals.css */
body {
  font-family: var(--font-primary), sans-serif;
}

:lang(el) {
  font-family: var(--font-greek), var(--font-primary), sans-serif;
}

className injects font-family directly onto the element, which is harder to override or compose

variable just exposes a CSS custom property (e.g. --font-primary) that you reference wherever you want in CSS, giving you full control over specificity and scoping

bogscamOP

2026-04-23T06:05:33.307Z

globals.css

body {
  font-family: var(--font-primary), sans-serif;
}

:lang(el) {
  font-family: var(--font-greek), var(--font-primary), sans-serif;
}

layout.tsx

const gSansFlex = Google_Sans_Flex({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"],
  variable: "--font-primary",
  preload: true,
});

const gSans = Google_Sans({
  subsets: ["greek"],
  display: "swap",
  weight: ["400", "500", "600", "700"],
  variable: "--font-greek",
  preload: true,
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html className={`${gSansFlex.variable} ${gSans.variable}`}>
      <body className="text-white bg-black">{children}</body>
    </html>
  );
}

Greek paragraphs are still being rendered using the --font-primary font under the current configuration.

@Palomino

bogscamOP

2026-04-23T06:13:00.692Z

The following errors are being logged in the console too

⚠ ./
Failed to find font override values for font `Google Sans Flex`
Skipping generating a fallback font.


⚠ ./
Failed to find font override values for font `Google Sans`
Skipping generating a fallback font.