Next.js 13 fonts with MUI components #45433

MatusJurcak · 2023-01-31T10:10:14Z

MatusJurcak
Jan 31, 2023

When using the new font system in Next.js 13, I had a problem with the imported fonts not being used in a few MUI components with "presentation" role (such as Dialogs, Menus, etc.). I was doing everything as it was written in documentation (https://nextjs.org/docs/basic-features/font-optimization) and I finally found out that those components are directly under body component, meaning they are above (or should i say outside of) main component. This means that the className and variable of said fonts are not added and used inside those components. My workaround was to create own _document file and add those fonts and their classnames directly to the body component. Is this the right solution or is there better workaround?

Answered by MatusJurcak

Jul 22, 2024

After a year I found a solution that I'm most happy with. @benwwalker 's solution is great, but works only if you want to use one font in the dialog and also you still cannot use the font variables (somefont.variable) ,as shown in the NextJS docs, because that variable is defined only inside the main element.

My solution was to add the font variables to the MuiModal and MuiMenu elements the same way as I used it inside the main element. So my MUI theme looks something like this:

const mainFont = Barlow({
    weight: ['300'],
    variable: '--font-barlow',
    subsets: ['latin', 'latin-ext'],
});

const headingsFont = Barlow_Condensed({
    weight: ['300'],
    variable: '--font-barlow-con…

View full answer

benwwalker · 2023-02-27T12:50:56Z

benwwalker
Feb 27, 2023

I found certain things weren't picked up when migrating to Nextjs 13's next/font module. I use a custom Theme.tsx from MUI, which was respecting some of the body and className guidance but not others.

My solution was to bring the next/font import to the top of the Theme.tsx file - like so

import { createTheme, Theme } from "@mui/material/styles";
import { Josefin_Sans } from "next/font/google";

const josefin_Sans = Josefin_Sans({
  weight: ["300", "400"],
  style: ["normal", "italic"],
  subsets: ["latin"],
});

const theme: Theme = createTheme({
  ...
typography: {
    fontSize: 16,
    fontFamily: josefin_Sans.style.fontFamily,
...

6 replies

nkardjoudj-sobotech Jul 6, 2023

Thank you for this.
It works in the App router too, same principle, create the font and use it in your theme's typography. Honestly this should be somewhere in the docs.

bjackson42 Aug 15, 2023

This helped me a lot trying to figure out how to get MUI createTheme to recognize my font. I was setting fontFamily incorrectly. Thank you for posting this solution. Have a great day!

luizguilherme4 Aug 24, 2023

Works very well for me, thanks for sharing

slavache May 20, 2024

Brilliant, thanks for the suggestion. Works well with Next 14 (app router) and MUI v5.

DjayNii Jun 29, 2024

thanks for the answer i been struggling since a day to import font to my MUI FILE thanks Mate!!

RayHughes · 2023-04-28T17:37:11Z

RayHughes
Apr 28, 2023

I did something like this to avoid the font being imported twice. This does not solve the case of needing different fonts in the component however.

  return (
    <>
      <style global jsx>
        {`html {
            font-family: ${montserrat.style.fontFamily};
        }`}
      </style>
      <div className={cx('wrapper', montserrat.variable, readexPro.variable)}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={sharpTheme}>
            <CssBaseline />
            <SSRProvider>
                <Component {...pageProps} {...router} />
            </SSRProvider>
          </ThemeProvider>
        </StyledEngineProvider>
      </div>
    </>
  );

0 replies

hacktisch · 2023-05-18T11:41:48Z

hacktisch
May 18, 2023

You could just specify the font to inherit from the parent, eventually inheriting the document base font.
I'm using the new Next.js App router in this example, in layout.js:

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
const theme = createTheme({
    typography: {
        fontFamily: 'inherit',
    }
   ...
}

Then set the font class on the body and provide the theme:

  return (
    <html lang="en">
      <body className={inter.className}>
      <ThemeProvider theme={theme}>
          <CssBaseline />
          ...

2 replies

zacharymichaelmoore Oct 3, 2023

How are you able to us createTheme on a RootLayout component? I am assuming that's what this is because you have an html element.

bastien612 Nov 19, 2023

I feel like using "inherit" is the most optimal solution. That's how MUI is expected to work in NextJS, when we specify a font in the layout

epsilon11101 · 2023-09-21T06:04:27Z

epsilon11101
Sep 21, 2023

for me this works:
Next.js 13.5

file : src/theme/localFonts.fonts.jsx

import localFont from "next/font/local";

export const divisibleHigh = localFont({
  name: "Divisible High",
  src: "../../public/fonts/DivisibleInvisibleHigh.ttf",
  weight: "normal",
});

on my theme:

file: src/theme/custom.theme.jsx

import {
  divisibleHigh
} from "./localFonts.fonts";

export const theme = createTheme({
  palette:{......},
  typograyphy:{
   fontFamily: divisibleHigh.style.fontFamily
  }
}

0 replies

maykel-oropeza · 2024-04-20T22:18:53Z

maykel-oropeza
Apr 20, 2024

This solution works for me

export const lato = Lato({
  weight: ['100', '300', '400', '700', '900'],
  subsets: ['latin'],
  display: 'swap',
});

const { fontFamily, ...latoStyle } = lato.style;

export const typography = {
  fontFamily: [
    fontFamily
  ].join(','),

  h1: { fontFamily: `${fontFamily}`, fontSize: 45 },

  ...

Please use ${fontFamily} as name of the font in the components since next add some kind of nomenclature in the name of the font

👇

0 replies

Linuhusainnk · 2024-04-21T13:21:26Z

Linuhusainnk
Apr 21, 2024

responsiveFont option not working

0 replies

MatusJurcak · 2024-07-22T19:20:09Z

MatusJurcak
Jul 22, 2024
Author

After a year I found a solution that I'm most happy with. @benwwalker 's solution is great, but works only if you want to use one font in the dialog and also you still cannot use the font variables (somefont.variable) ,as shown in the NextJS docs, because that variable is defined only inside the main element.

My solution was to add the font variables to the MuiModal and MuiMenu elements the same way as I used it inside the main element. So my MUI theme looks something like this:

const mainFont = Barlow({
    weight: ['300'],
    variable: '--font-barlow',
    subsets: ['latin', 'latin-ext'],
});

const headingsFont = Barlow_Condensed({
    weight: ['300'],
    variable: '--font-barlow-condensed',
    subsets: ['latin', 'latin-ext'],
});

const muiTheme = createTheme({
    typography: {
        fontFamily: mainFont.style.fontFamily,
    },
    components: {
        MuiModal: {
            defaultProps: {
                classes: {
                    root: `${mainFont.variable} ${headingsFont.variable}`,
                },
            },
        },
        MuiMenu: {
            defaultProps: {
                classes: {
                    root: `${mainFont.variable} ${headingsFont.variable}`,
                },
            },
        },
    },
});

My tailwind.config.ts looks something like this:

const config = {
   theme: {
        ...
        fontFamily: {
             body: ['var(--font-barlow)'],
             headings: ['var(--font-barlow-condensed)']
        },
        ...
    },
}

This will add the needed variables to the Dialog element and inside i can use something like this:

<h1 className='font-headings'></h1>

which will successfully apply the --font-barlow-condensed variable and thus the whole fontFamily on the h1 element.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js 13 fonts with MUI components #45433

{{title}}

Replies: 7 comments 8 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Next.js 13 fonts with MUI components #45433

Replies: 7 comments · 8 replies

MatusJurcak Jul 22, 2024 Author

Replies: 7 comments 8 replies

MatusJurcak
Jul 22, 2024
Author