ked*_*ddy 6 fonts material-ui next.js
我正在尝试在 Next.js 中使用 Material-UI 时向我的 theme.js 添加不同的字体。很难弄清楚如何做到这一点。
我已经尝试按照此处的建议（https://github.com/zeit/next.js/issues/512）使用 fontfaceobserver ，但无法更新主题。这是我的 theme.js 文件：
const theme = createMuiTheme({
typography: {
fontFamily: [
'Raleway','Roboto Condensed',
].join(','),
fontWeight: 700,
h1:{
fontFamily: 'Raleway',
fontWeight: 700,
}
},
});
我的 h1 的字体没有改变:(
Ili*_*lir 13
Nextjs 13 中的任何人都可以对本地字体执行此操作（与 Google 字体的工作方式相同）：
在theme.config.tsx
import localFont from "@next/font/local";
import { NextFont } from "@next/font";
const customFont: NextFont = localFont({
src: "../public/fonts/Montserrat-VariableFont_wght.ttf",
display: "swap",
});
const theme = createTheme({
typography: {
fontFamily: customFont.style.fontFamily,
},
});
export const ThemeConfig: React.FC<ThemeProps> = ({ children }) => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
};
如果您想将自托管字体添加到您的 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" />
为 Material 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,
};
无论谁来这里，答案实际上都在我使用的 Material-ui 和 Next.js 示例项目中：
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
您可以在上面看到如何导入 google 字体。