我有最困难的时间让谷歌字体与NextJS工作。
我从一个名为typography.ts的文件开始，在这里我使用nextjs字体优化器导入了一个Google字体：

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",
});

字符串
然后将这些字体导入到另一个名为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;

型
我也有一个themeExtensions文件：

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;
    };
  }
}

型
现在，我有了一个浅色和深色主题--我将themeExtension和commonStyles都导入到这两个主题中：

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

型
从“@mui/material/styles”中导入{主题};导入“../configurations/themeExtensions”;
从“../assets/colors”导入{ colors };从“../assets/tailwind-colors”导入{ amber，blue，绿色，red };从“../configurations/commonStyles”导入commonStyles;
const { dark：{ prime }，} =颜色;
const darkTheme ={. 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?

型