Radix UI / Nextjs 13 / Issue tracker

Next.js
1

Custom font with Radix UI is not working even with the configuration show in the docs
If someone have the same issue and succeed to fix it, let me know

1 Like
2

I have the same issue. I suspect it’s related to SSR because when I convert layout.tsx to a client component (and remove the metadata export) the font-family changes to __Inter_e66fe9, __Inter_Fallback_e66fe9.

Maybe someone more knowledgeable can correct me, but I think making your root layout a client component is not recommended, so I extracted a client component called ContentRoot containing everything inside <Theme> and inserted that into the root layout. This way I can still keep the metadata export in my root layout in place.

// layout.tsx
return (
  <html lang="en">
    <body>
      <ContentRoot>{children}</ContentRoot>
    </body>
  </html>
);

// ContentRoot.tsx
"use client";
...
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

const ContentRoot = ({ children }: { children: React.ReactNode }) => {
  return (
    <Theme appearance="light" accentColor="violet" className={inter.variable}>
      <NavBar />
      <main className="p-5">{children}</main>
    </Theme>
  );
};

Something else interesting is that Radix is adding a class and style attributes the <html> element, which is causing a console warning:

app-index.js:31 Warning: Extra attributes from the server: class,style

I’m not sure how big of a deal this is or how to fix it (aside from removing Radix), but the warning can be suppressed by setting suppressHydrationWarning to true on <html>:

<html lang="en" suppressHydrationWarning={true}>
1 Like
3

Ok, I see the note from Mosh regarding the “Extra attributes” error at the end of that section. I hadn’t gotten there yet. He says:

This is only a warning (and not an error) and it only happens in development on some machines. To resolve this, you have to remove the appearance prop from the Theme component in the root layout.

4

I was also stuck with this. There is a very simple workaround.

.radix-themes {
	--default-font-family: var(--font-inter) !important;
}

Just add !important at the end so that it overrides any other overrides caused due to other css modules.

You can verify that this works by looking at css variables in devtools also.
Without !important it stays with default system fonts.

Screenshot 2023-10-14 at 11.55.34 AM
Screenshot 2023-10-14 at 11.55.34 AM1920Ă—1675 216 KB

6 Likes
5

@Tay I would suggest you change the heading to be like “Next JS Radix UI Font Issue”
So it is easy for people to find. Also if possible add Tags like Uncategorized React TypeScript HTML/CSS

Can we please have Next.Js Tag @Mosh ? I am not sure how to register new Tags in the forum. We can add existing tags with #

I hope this helps.

2 Likes
6

I just created the Next.js tag! Thanks for the suggestion.

4 Likes
7

I was stuck here as well and !important did stop me from going to the --apple-system font but I’m instead loading up ui-sans-serif instead of inter

Is there something I’m doing wrong with the font import here? Any guidance is greatly appreciated!!

import "@radix-ui/themes/styles.css";
import "./theme-config.css";
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import NavBar from "./NavBar";
import { Theme } from "@radix-ui/themes";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.variable}>
        <Theme appearance="light" accentColor="violet" radius="none">
          <NavBar />
          <main className="p-5">{children}</main>
        </Theme>
      </body>
    </html>
  );
}
8

There’s an open RadixUI GitHub bug about this exact issue here: [Next.js][Bug] Typography fails to load · Issue #117 · radix-ui/themes · GitHub

Something with the order of imports makes the --default-font-family: var(--font-inter); declaration overwritten by code appended after our definition. Adding !important helps but it seems like a workaround to circumvent how CSS module imports happen in Next layout files.

Well… that’s now a couple of days of head-scratching over! Thanks all!