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

1 min read読了の目安(約1600字

前提

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

適用手順

  1. pages/_document.tsxGoogle fonts のリンク挿入
    今回はKosugiフォントを適用するので以下の内容を追加
    <Head>
    	<link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet" />
    	...
    
  2. src/theme.tsfontFamily の設定を追加
    以下の内容を追記する
    const theme = createMuiTheme({
    typography: {
        fontFamily: [
            'Kosugi',
        ].join(','),
    },
    ...
    
  3. 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フォント が適用されます。

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

  1. 以下のようにフォントタイプ毎にthemeインスタンスを作成します。
    const kosugiFont = createMuiTheme({
      typography: {
    	fontFamily: [
    	  'Kosugi',
    	].join(','),
    },});
    
    const kosugiMaruFont = createMuiTheme({
      typography: {
    	fontFamily: [
    	  'Kosugi Maru',
    	].join(','),
    },});
    
  2. それぞれフォントを適用させたい箇所を、それぞれのthemeの ThemeProvider で囲むことで、指定したthemeのフォントが適用されます
    <ThemeProvider theme={kosugiFont}>
    	<Typography variant={"h3"}>
    	    彼らの機器や装置はすべて生命体だ。
    	</Typography>
    </ThemeProvider>
    <br/><br/>
    <ThemeProvider theme={kosugiMaruFont}>
    	<Typography variant={"h3"}>
    	    彼らの機器や装置はすべて生命体だ。
    	</Typography>
    </ThemeProvider>