NextJS Will Not Display Google Fonts

Question

I am having the hardest time getting google fonts to work with NextJS.

I start out, with a file called typography.ts where I import a Google font using the nextjs font optimizer:

import { Noto_Serif_Hebrew, Roboto } from "next/font/google";

export const roboto = Roboto({
  weight: ["300", "400", "500", "700"],
  subsets: ["latin"],
  display: "swap",
});

export const notoSerifHebrew = Noto_Serif_Hebrew({
  weight: ["400", "700"], // Add the weights you need
  subsets: ["latin", "latin-ext", "hebrew"],
  display: "swap",
});

I then import these fonts into another file called commonStyles.ts

import { roboto, notoSerifHebrew } from "../assets/typography";
export const hebrewFamily = `${notoSerifHebrew.className}, "Times New Roman", sans-serif`;
export const englishFamily = `${roboto.className}, Arial, sans-serif`;

const commonStyles = {
  typography: {
    fontFamily: englishFamily, // This will be the default font family
    hebrewFamily: hebrewFamily,
    englishFamily: englishFamily,
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        a: {
          textDecoration: "none",
          color: "inherit",
        },
      },
    },
  },
};

export default commonStyles;

I also have a themeExtensions file:

declare module "@mui/material/styles" {
  interface Typography {
    hebrewFamily: string;
    englishFamily: string;
  }

  interface TypographyOptions {
    hebrewFamily?: string;
    englishFamily?: string;
  }

  interface Theme {
    prime: {
      [key: string]: string;
    };
    accent: {
      [key: string]: string;
    };
    transparency: {
      [key: string]: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    prime?: {
      [key: string]: string;
    };
    accent?: {
      [key: string]: string;
    };
    transparency?: {
      [key: string]: string;
    };
  }
}

Now, I have a light and dark theme -- I import both themeExtension and commonStyles into both:

// lightTheme.ts
import { createTheme } from "@mui/material/styles";
import "../configurations/themeExtensions";

import { colors } from "../assets/colors";
import { amber, blue, green, red } from "../assets/tailwind-colors";
import commonStyles from "../configurations/commonStyles";

const {
  light: { prime },
} = colors;

const lightTheme = createTheme({
  ...commonStyles,
  ...colors.light,
  palette: {
    mode: "light",
...

// darkTheme.ts

import { createTheme } from "@mui/material/styles"; import "../configurations/themeExtensions";

import { colors } from "../assets/colors"; import { amber, blue, green, red } from "../assets/tailwind-colors"; import commonStyles from "../configurations/commonStyles";

const { dark: { prime }, } = colors;

const darkTheme = createTheme({ ...commonStyles, ...colors.dark, palette: { mode: "dark", ...

Now, at this point, I would expect to be able to use my two Google fonts.  But, I can't.  For starters, I would think that the default font would be Roboto.  But, it is not.  It is whatever the fallback is. Right now, it is Arial.  If I switch it to Times New Roman, then it is Times New Roman.

Furthermore, I can't even switch it directly.   `sx={{fontFamily: "Roboto" }}` won't do anything.

Any idea why this doesn't work?