nextjs font customization
Unanswered
bogscam posted this in #help-forum
bogscamOP
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>
);9 Replies
Hello ,
isn't
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
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
@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
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.
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
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?
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
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
: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