# Radix UI / Nextjs 13 / Issue tracker

**URL:** <https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942>\
**Category:** Next.js\
**Created:** [October 11, 2023, 8:42am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942 "2023-10-11T08:42:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tay](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@Tay](https://forum.codewithmosh.com/u/Tay)\
**Post date:** [October 11, 2023, 8:42am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/1 "2023-10-11T08:42:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Programmist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/programmist/32/7006_2.png) [@Programmist](https://forum.codewithmosh.com/u/Programmist)\
**Post date:** [October 11, 2023, 10:46pm UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/2 "2023-10-11T22:46:23Z")

</div>

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.

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

```

```jsx
// 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:

```auto
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>`:

```jsx
<html lang="en" suppressHydrationWarning={true}>

```

---

<div class="post-metadata">

**Author:** ![Programmist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/programmist/32/7006_2.png) [@Programmist](https://forum.codewithmosh.com/u/Programmist)\
**Post date:** [October 12, 2023, 10:55pm UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/3 "2023-10-12T22:55:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![KrupeshAnadkat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/krupeshanadkat/32/4227_2.png) [@KrupeshAnadkat](https://forum.codewithmosh.com/u/KrupeshAnadkat)\
**Post date:** [October 14, 2023, 6:27am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/4 "2023-10-14T06:27:04Z")

</div>

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

```css
.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](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/2/2823301da087760b9e11443f68e2a508102ff4c3.jpeg)

---

<div class="post-metadata">

**Author:** ![KrupeshAnadkat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/krupeshanadkat/32/4227_2.png) [@KrupeshAnadkat](https://forum.codewithmosh.com/u/KrupeshAnadkat)\
**Post date:** [October 14, 2023, 6:31am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/5 "2023-10-14T06:31:04Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Mosh](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/mosh/32/8948_2.png) [@Mosh](https://forum.codewithmosh.com/u/Mosh)\
**Post date:** [October 16, 2023, 3:44pm UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/6 "2023-10-16T15:44:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![horizonweb](https://avatars.discourse-cdn.com/v4/letter/h/eb8c5e/32.png) [@horizonweb](https://forum.codewithmosh.com/u/horizonweb)\
**Post date:** [November 15, 2023, 6:00pm UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/7 "2023-11-15T18:00:35Z")

</div>

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!!

```js
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>
  );
}

```

---

<div class="post-metadata">

**Author:** ![HELIOSWEB](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/heliosweb/32/7414_2.png) [@HELIOSWEB](https://forum.codewithmosh.com/u/HELIOSWEB)\
**Post date:** [December 6, 2023, 6:37am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/8 "2023-12-06T06:37:01Z")

</div>

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](https://github.com/radix-ui/themes/issues/117)

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!

---

<div class="post-metadata">

**Author:** ![shivang2191](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/shivang2191/32/8442_2.png) [@shivang2191](https://forum.codewithmosh.com/u/shivang2191)\
**Post date:** [July 21, 2024, 5:11am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/9 "2024-07-21T05:11:26Z")

</div>

Well this is what I did to fix this issue. In the `theme-config.css` file, all I had to do was this:

```auto
@import '@radix-ui/themes/styles.css';
.radix-themes {
  --default-font-family: var(--font-roboto);
}

```

Hope it helps 🙂

---

<div class="post-metadata">

**Author:** ![AminStakhr](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@AminStakhr](https://forum.codewithmosh.com/u/AminStakhr)\
**Post date:** [December 29, 2024, 8:15am UTC](https://forum.codewithmosh.com/t/radix-ui-nextjs-13-issue-tracker/22942/10 "2024-12-29T08:15:02Z")

</div>

introduction to use local fonts with next and radixui :

step 1 : put your fonts to the public folder under the fonts folder

step 2 : add below code to your layout file  
import localFont from “next/font/local”;

step 3 : add your font to the layout file :  
const vazir = localFont({  
src: [  
{  
path: “…/public/fonts/Vazir-FD-WOL.woff2”,  
weight: “200”,  
style: “normal”,  
},  
],  
variable: “–font-inter”,  
});

step 4 : create theme-config.css file beside the layout file and put below code on it :

@import “@radix-ui/themes/styles.css”;

.radix-themes {

–default-font-family: var(–font-inter) !important;

}

step 5 : import theme-config.css to layout.tsx  
import “./theme-config.css”;

step 6 : add below classname to the html tag of layout file :

finish…