ロゴセイルデザインログブック

技術関係の覚書ブログ

NEXT.js + TailwindcssでGooglフォントを利用する方法

Next.jsでGoogleフォントを利用する場合、Next.jsの公式で用意されているnext/fontを利用することで利用できます。
今回はGoogleフォントを元にやり方をまとめております。

サイト全体で利用する

作業内容

  1. Googleフォントをnext/font/googleを利用してインポートする
  2. フォントの設定を変数に格納する
  3. 設定したフォントを使う
import { Inter, Roboto } from 'next/font/google'

const inter = Inter({
　subsets: ['latin'],
});

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
});

export default function RootLayout({
　children,
}: {
　children: React.ReactNode
}) {
　return (
　　<html lang="en" className={inter.className}>
　　　<body>
　　　　{children}
　　　</body>
　　</html>
　)
}

Googleフォントのインポート

import { Inter, Roboto } from 'next/font/google'で利用したいフォントをインポートします。

Next.jsではvariableフォントを利用すること推奨しています。

フォントの設定を変数に格納する

const inter = Inter({
　subsets: ['latin'],
});

subsetsにはlatinを指定します。

variableフォント以外を利用する場合は、フォントの太さを指定する必要があるようです。

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
});

設定したフォントを使う

利用したい場所でクラスとして指定すれば利用することができます。

<html lang="en" className={inter.className}>
　<body>
　　{children}
　</body>
</html>

特定の箇所で利用する場合

作業内容

  1. フォントのインポートを別ファイルにする
  2. 利用したい箇所で使用するフォントをインポートする
  3. フォントを使う

フォントのインポートを別ファイルにする

以下の部分を別のファイルに移動する。
ここではappディレクトリの外にhogeディレクトリを作成した前提としております。

import { Inter, Roboto } from 'next/font/google'

const inter = Inter({
　subsets: ['latin'],
});

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
});

利用したい箇所で使用するフォントをインポートする

import　{ roboto } from '@/hoge/fonts'

export default function Page() {
　return (
　　<div className={roboto.className}>
　　　ここにコンテンツ
　　</div>
　)
}

設定したフォントを利用する

利用したい場所でクラスとして指定すれば利用することができます。

Tailwindcssで利用する場合

作業内容

  1. インポートしたフォントにvariableオプションを追加する
  2. Tailwindの設定ファイルにCSS変数を追加する
  3. 設定したフォントを利用する

インポートしたフォントにvariableオプションを追加する

import { Inter, Roboto } from 'next/font/google'

const inter = Inter({
　subsets: ['latin'],
　variable: '--font-inter'
});

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
　variable: '--font-roboto',
});

Tailwindの設定ファイルにCSS変数を追加する

/** @type {import('tailwindcss').Config} /

module.exports = { 
　content: [ './pages/*/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}', ],
　theme: {
　　extend: {
　　　fontFamily: {
　　　　inter: ['var(--font-inter)'],
　　　　roboto: ['var(--font-roboto)'],
　　　},
　　},
　},
　plugins: [],
}

設定したフォントを利用する

tailwindo向けの設定が完了していれば候補に設定した内容が表示されると思いますのでクラスとして指定します。

export default function Page() {
　return (
　　<div className={font-roboto}>
　　　ここにコンテンツ
　　</div>
　)
}

まとめ

今回はNEXT.js + TailwindcssでGoogleフォントを利用する方法をまとめました。

参考