こみめも
2023.06.08

Next.jsにGoogle Fontsを導入してみた

目次

動作環境

  • Next.js 13.4.4

完成版コード

import { Noto_Sans_JP, Nunito } from 'next/font/google';

export const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  display: 'swap',
});

export const nunito = Nunito({
  subsets: ['latin'],
  display: 'swap',
});
import { Noto_Sans_JP, Nunito } from '@/app/fonts';

export default async function RootLayout({ children }: Props) {
return (
    <html lang="ja" className={`${nunito.className} ${notoSansJP.className}`}>
      <body>
        {children}
      </body>
    </html>
  );
}

これだけで適応される👏🏻💛
Next.jsにGoogle Fonts導入するの結構手間だった印象があるから個人的にとても嬉しい！

補足

Next.js 13.2.0からはパッケージのインストールが不要に…！

いままで、Next.jsでGoogle Fontsを使うには@next/fontというパッケージをインストールする必要があったけど、v13.2.0からはデフォルトで組み込まれているため個別でのインストールは不要になったよ✌🏻

💁🏻‍♀️ Next.jsの公式サイトにも記載があります。

Variable Fontsじゃないものはweightを設定する必要があるよ🚀

そもそもVariables Fontsとは？

簡単にいうと、従来よりも自由にスタイルが変えられるかつ、ファイルサイズが圧倒的に小さいフォントのこと。
つまりVariables Fontsは積極的に使ったほうがよさそう🙈

💁🏻‍♀️ もっと詳しい解説はGoogle Fontの公式サイトに書いてあります。

それでもVariables Fontsではないフォントが使いたい！という場合は、weightを設定すれば大丈夫 🙆🏻‍♀️

import { Noto_Sans_JP, Nunito, M_PLUS_Rounded_1c } from 'next/font/google';

export const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  display: 'swap',
});

export const nunito = Nunito({
  subsets: ['latin'],
  display: 'swap',
});

const mPlusRounded1c = M_PLUS_Rounded_1c({
  weight: ['400', '700'], // ここを追加
  subsets: ['latin'],
  display: 'swap',
});

「一部だけこのフォントに」というのももちろんできるよ🙆🏻‍♀️

コンポーネントで呼び出せばOK！

import { nunito } from '@/app/fonts';

export const Title =　() => {
  return (
    <h1 className={nunito.className}>Title<h1>
  )
}

CSSでも使えたよ🥳

dangerouslySetInnerHTMLで出力したものとかはどうすんねん？と思ったけどこれも問題なくできた！

import { Noto_Sans_JP, Nunito } from 'next/font/google';

export const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  display: 'swap',
});

export const nunito = Nunito({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-nunito' // variableを定義
});
import { Noto_Sans_JP, Nunito } from '@/app/fonts';

export default async function RootLayout({ children }: Props) {
return (
    <html lang="ja" className={`${nunito.variables} ${notoSansJP.className}`}> // .variblesに変更
      <body>
        {children}
      </body>
    </html>
  );
}
h1 {
  font-family: var(--font-nunito), sans-serif; // variableの値を設定
}

💁🏻‍♀️ これもNext.jsの公式サイトに記載がありました。

Tailwind CSSもテーマを拡張すれば大丈夫

app/layout.tsxの記述は変更なし。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        nunito: ['var(--font-nunito)'],
      },
    },
  },
  plugins: [],
};

import { nunito } from '@/app/fonts';

export const TitleEn =　() => {
  return (
    <h1 className="font-nunito">TitleEn<h1>
  )
}

next/font/googleにないフォントもあったよ🥲

import { Geologica } from 'next/font/google'; // モジュール '"next/font/google"' にエクスポートされたメンバー 'Geologica' がありません。

next/font/googleに存在するフォント一覧みたいのがあれば教えてほしいです🙇🏻‍♀️

Vercelでのビルド中にエラーが出たよ👀

error Failed to find font override values for font M PLUS Rounded 1c

でもフォントは正しく表示されていました。

該当issue見つけたけどまだ解決には至ってないっぽい？🤔

感想

Google FontsはNext.js13で超使いやすくなった印象！

また方法が変わるとしても、どんどんシンプルになっていく気がするので楽しみです😊

おわり！

最後まで読んでいただきありがとうございます！
もしよければ「読んだよ！」の代わりに↑の紙飛行機をクリックで飛ばしてください。わたしの元に届きます。

Special Thanks!!!

ありがとうございました