Next.js Discord

Discord Forum

Importing Roboto font is missing some weights

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I am importing Roboto like so:
const roboto = Roboto({
  weight: ["100", "300", "400", "500", "700", "900"],
  subsets: ["latin"],
  display: "swap",
  preload: true,
});


Then i am initializing it here:
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <ThemeClient>
        <NextUserProvider>
          <UserProvider>
            <body>
              <AppRouterCacheProvider>
                <div className={roboto.className}>
                  <Header />
                  <div className={"content"}>{children}</div>
                </div>
              </AppRouterCacheProvider>
            </body>
          </UserProvider>
        </NextUserProvider>
      </ThemeClient>
    </html>
  );
}


I am using MaterialUI and am noticing that whenever i try to use font-weight:500, it is not applying. I can apply >500 and it works. At first I thought it was MUI styles not applying, but i see other styles/icons. Is there something I may be missing on where to initialize this font?

11 Replies

West African LionOP
It appears to be working on SSR, but how can i apply it to client side too?
can you make a [minimal reproduction repository](https://l.joulev.dev/mrr)? if it's not related to MUI then remove the MUI part in the repro repo
West African LionOP
Yea let me see if i can create a minimal repository. Do you happen to have the code for your example here that I can compare?
joulev
yes wait a min will push
West African LionOP
Appreciate it 😃
West African LionOP
So my server side rendered fonts are working it appears, it's my client side components that aren't
joulev
i just pushed the example with client components, still working as intended
West African LionOP
Appreciated. If i can't figure it out from your example i'll update with a minimal repo. Thanks!!