在 Next.js 中加载字体以自定义 Material-UI 主题不起作用答案

【问题标题】：Loading fonts to customize Material-UI theme in Next.js not working在 Next.js 中加载字体以自定义 Material-UI 主题不起作用
【发布时间】：2020-01-28 02:12:36
【问题描述】：

我正在尝试在 Next.js 中使用 Material-UI 时向我的 theme.js 添加不同的字体。很难弄清楚如何去做。

我已尝试按照此处的建议使用 fontfaceobserver (https://github.com/zeit/next.js/issues/512)，但无法更新主题。这是我的 theme.js 文件：

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Raleway','Roboto Condensed',
    ].join(','),
    fontWeight: 700,
    h1:{
      fontFamily: 'Raleway',
      fontWeight: 700,
    }
  },
});

我的 h1 的字体没有改变 :(

【问题讨论】：

标签： fonts material-ui next.js

【解决方案1】：

不管是谁来的，答案其实就在我正在使用的 Material-ui 和 Next.js 示例项目中：

https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

您可以在上面看到谷歌字体是如何导入的。

【讨论】：

【解决方案2】：

如果你想为你的 next.js 项目添加自托管字体

将 your-font.ttf 复制到 public/fonts 文件夹中

创建一个新的 css 文件，例如 your-font.css（在 public/fonts/ 中）并将此代码添加到其中：

@font-face {
  font-family: 'your-font';
  font-weight: normal;
  font-style: normal;
  src: url('./your-font.ttf');
}

转到 page/_document.js 并在 <Head> 标签内添加这一行

<link rel="stylesheet" href="/fonts/your-font.css" />

为材质 ui 创建一个 theme.js 文件并将您的字体添加到 Typography ：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme(
  {
    typography: {
      fontFamily: [
        'your-font',
        'Arial',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
    },
  },
);

export default theme;

转到 pages/_app.js 并添加您的主题，例如：

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../common/theme';//location of theme file created in previous step

export default function MyApp(props) {
  const { Component, pageProps } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}> {/*<---- Add this */}
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

【讨论】：

【解决方案3】：

您的 theme.js 文件做得很好，所以下一步应该是创建一个 Layout 组件或使用您的 _app.js文件以提供您的自定义主题。如下所示。

在您的 Layout 组件中。

import { ThemeProvider } from "@material-ui/core";

<ThemeProvider theme={theme}>
  {children}
  <h1>MY TEXT</h1> // now this h1 tag will be displayed with your font
</ThemeProvider>

【讨论】：