Next.jsでダウンロードしたフォントを使う

現在のトップ画像。

「Blog.」っていうロゴはNext.jsのテンプレートでh1で書かれていたものをそのまま使ってるよ。フォントはtailwindのfont-boldで、検証ツールで見るとfont-family: Inter, Inter Fallback;って書かれてるよ。

今回はこの「Blog.」のフォントファミリーを変えてみるよ。

フォント探し

無料のおしゃフォントを探して、FontSpaceっていうサイトに流れ着いたよ。気に入ったフォントはお気に入り保存して後でまとめてダウンロードできるよ。

Next.jsに配置

FontSpaceでダウンロードしたファイルを解凍すると、フォントファイルが.tffっていう拡張子のファイルに入ってるよ。それをコピペして、/public/fontsっていうディレクトリに配置したよ。

globals.cssを編集

/src/app/globals.cssに以下の行を追加したよ。

@font-face {
    font-family: 'Reconville';
    src: url('/fonts/reconville.ttf') format('woff');
  }

（ファイルの拡張子はttfなんだけど、なぜかformat('woff')にしないと表示されなかったよ。）

@font-faceを使うとユーザーのパソコンに入ってないフォントとかブラウザのスタンダードフォントじゃないフォントも使えるようになるらしいよ。

ブラウザで確認

globals.cssはsrc/app/layout.tsxでインポートされてるから、もうサイト中で使えるはずだよ。

ブラウザの検証ツールで試しにトップのロゴのfont-familyを変えてみるよ。

ブラウザの検証ツールを開いて...

Stylesタブでfont-familyをさっき指定した名前にするよ。

ん？

なんか後ろに変なのがついてるよ。

「Blog.」のドットを消したら消えたよ。

tailwind.config.tsを編集

/tailwind.config.tsに以下の行を追加するよ。

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        reconville: ['Reconville'], // 新しいフォントを追加
      },
    },
  },
  plugins: [],
};

これで、tailwindでfont-reconvilleと入力したらフォントが使えるようになったよ。

<h1 className="text-5xl md:text-8xl font-reconville tracking-tighter leading-tight md:pr-8">
  Blog
</h1>

表示してみる

パソコン

スマホ

おお〜画面が軽くなった...

最終系

いくつか試して、Magic Munchiesというフォントにしたよ。

記事詳細画面とかでちっちゃく見えてるときかわいい。

フォントを変えるだけでサイトの雰囲気ってこんなに変わるんだね。