nextjs font customization
Unanswered
bogscam posted this in #help-forum
Original message was deleted.
16 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?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
@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.
@GravityExploitz ✦ <@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.
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?
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
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.@GravityExploitz ✦
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.@bogscam > globals.css
css
body {
font-family: var(--font-primary), sans-serif;
}
:lang(el) {
font-family: var(--font-greek), var(--font-primary), sans-serif;
}
> layout.tsx
javascript
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.
:lang(el) only matches elements that have a lang="el" attribute on them or an ancestor. If your HTML is just <html lang="en">, nothing will ever match :lang(el).
@bogscam 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.
These are harmless, next/font just can’t compute fallback metrics for these two fonts since they aren’t in its internal lookup table. It means the adjustFontFallback feature won’t work, but the fonts themselves load fine. You can suppress the noise by explicitly disabling it:
adjustFontFallback: false
adjustFontFallback: false
Giant panda
hii anyone there alive ir what
Giant panda
Anyone the collection?