😸

Next.js + Material UIにGoogle Fontsを適用する

2020/10/19に公開

Next.js

Material-UI

tech

前提

Next.jsアプリにMaterial UI導入済み

適用手順

pages/_document.tsx に Google fonts のリンク挿入
今回はKosugiフォントを適用するので以下の内容を追加
```
<Head>
	<link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet" />
	...
```

src/theme.ts に fontFamily の設定を追加
以下の内容を追記する

const theme = createMuiTheme({
typography: {
    fontFamily: [
        'Kosugi',
    ].join(','),
},
...

pages/_app.tsx に作成したthemeの ThemeProvider を追加
以下実装例、個々の _app.tsx の内容に沿って改変してください

import {ThemeProvider} from '@material-ui/styles';
import theme from '../src/theme';
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
...
	return (
		...
		<ThemeProvider theme={theme}>
			<MainComponent />
		</ThemeProvider>
		...

これにより、ThemeProvider で囲まれた要素以下のテキスト全てに Kosugiフォント が適用されます。

複数のフォントを使い分けたい場合

以下のようにフォントタイプ毎にthemeインスタンスを作成します。

const kosugiFont = createMuiTheme({
  typography: {
	fontFamily: [
	  'Kosugi',
	].join(','),
},});

const kosugiMaruFont = createMuiTheme({
  typography: {
	fontFamily: [
	  'Kosugi Maru',
	].join(','),
},});

それぞれフォントを適用させたい箇所を、それぞれのthemeの ThemeProvider で囲むことで、指定したthemeのフォントが適用されます

<ThemeProvider theme={kosugiFont}>
	<Typography variant={"h3"}>
	    彼らの機器や装置はすべて生命体だ。
	</Typography>
</ThemeProvider>
<br/><br/>
<ThemeProvider theme={kosugiMaruFont}>
	<Typography variant={"h3"}>
	    彼らの機器や装置はすべて生命体だ。
	</Typography>
</ThemeProvider>

前提

適用手順

複数のフォントを使い分けたい場合

Discussion