Issue
I've got a very simple next JS project that includes two fonts, Roboto Mono and Source Sans 3. I declared them as outlined in the documentation, set the variable names, then leverage the variable names in the css files.
import './globals.scss'
import type { Metadata } from 'next'
import { Source_Sans_3, Roboto_Mono } from 'next/font/google'
const robotoMono = Roboto_Mono({
subsets: ['latin'],
variable: '--font-roboto-mono',
weight: ['400', '700'],
style: ['normal', 'italic'],
display: 'swap',
});
const sourceSansPro = Source_Sans_3({
subsets: ['latin'],
variable: '--font-source-sans',
weight: ['400', '700'],
style: ['normal', 'italic'],
display: 'swap',
});
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body
className={`${robotoMono.variable} ${sourceSansPro.variable}`}
>
{children}
</body>
</html>
)
}
Then in my globals.scss file, and other css files for the children components, I leverage the variable name for any links in the body:
@import "./mixins.scss";
:root {
--max-width: 1100px;
--border-radius: 12px;
font-size: 14px;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
a {
@include h4-mixin;
text-decoration: none;
color: inherit;
cursor: pointer;
padding: 0 0.25em;
font-size: 0.8em;
font-family: var(--font-roboto-mono); // here
color: inherit;
cursor: pointer;
}
This works fine in local development. But once deployed, the Roboto Mono font is not reflected anywhere it should be. This includes other css declarations beyond just what I've shown here in the globals.scss file.
When I inspect the deployment, I can see that the variable names are both reflected on the <body> element:
screenshot of the inspected DOM tree
And, the font has been loaded, although the variable name looks different than the one declared on the <body>:
screenshot of the font loaded in the files
This mismatch does not exist when developing locally. The variable name on the element match the variable declared for the loaded Roboto Mono, and it is reflected on the page.
Solution and Question
On a hunch, I switched the order of the fonts in page.tsx, so Roboto Mono is loaded first and Source Sans Pro is loaded second. This actually solved the issue in staging, but not in my production deployment. What could be happening? Is this something to do with the loading times, and if so, why wouldn't switching the fonts solve this issue?
Thanks for your help.