More than 1 year has passed since last update.

Next.js + MUI v5でGoogleフォントを使用する方法

Posted at 2022-11-06

概要

Next.jsでMUIをGoogleフォントを使用する方法の備忘録になります。
CDNからGoogleフォントを追加する方法と、NPMパッケージを追加する方法がありますが
本手順はCDNから追加する方法のみ紹介します。

前提条件

Next環境にMUIをインストールしていること。

使用手順

使用したいGoogle Fontsを決める。フォントを決めたら、リンクをコピーする。以下はTrain Oneを使用する例になる。
```
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&family=Train+One&display=swap" rel="stylesheet">
```

pages/_document.jsを作成し、Headタグの中に、先ほどコピーしたリンクを貼り付ける。Next.jsのpagesコンポーネントはデフォルトでHeadやbodyタグを定義してくれる。このデフォルト設定を変更するのに使用するのがpages/_document.jsファイルである。

pages/_document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Train+One&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

pages/_document.jsに、”Trail One”のフォントを使用するよう、ThemeProviderを作成する。以下のコードを実装することによって、ページ全体をTrail Oneフォントにすることができる。

pages/_document.js

import { ThemeProvider } from "@emotion/react";
import { createTheme } from "@mui/material";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const theme = createTheme({
    typography: {
      fontFamily: ["Train One", "cursive"].join(","),
    },
  });
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

一部のみ適用したい場合

テーマ全体ではなく、一部のコンポーネントのフォントだけ変更したい場合は、sxプロパティやカスタムコンポーネントでフォントを指定すると楽。

pages/index.js

import { Typography } from "@mui/material";
import { styled } from "@mui/system";

export default function Home() {
  const customeMenu = (props) => (
    <Typography {...props} variant="h1">
      {props.children}
    </Typography>
  );
  const H1 = styled(customeMenu)({
    color: "green",
    fontFamily: ["Train One", "cursive"].join(","),
  });

  return (
    <>
      <Typography variant="h1">Welcome to Next.js!</Typography>
      <H1>Custome Component</H1>
      <Typography
        variant="h1"
        color="primary"
        sx={{
          fontFamily: ["Train One", "cursive"].join(","),
        }}
      >
        sx Component
      </Typography>
    </>
  );
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up