Next.jsでnext/font/を使ってみた

Next.js

Posted at 2024-05-24

next/fontの使い方の備忘。
headタグ内でlinkをインポートするとかCSSでインポートしてフォントを使うよりnext/fontを使う方がフォントの読み込みが早くなってパフォーマンスが上がるらしい。

ディレクトリ構成

src/
 |- app/
 |   |- layout.js
 |   |- page.js
 |   |-components
 |        |-Header.js
 |- style
 |   |- global
 |   |    |- _index.scss
 |   |    |- _mixin.scss
 |   |    |- _variables.scss
 |   |- layout
 |   |    |- _index.scss
 |   |    |- _header.scss
 |   |  ~ 省略 ~
 |   |- style.scss
 |- font
 |   |- Delogy-Regular.ttf　 //ローカルフォント
 |   |- font.js

書き方

font.js の設定

font.js

import { Noto_Sans_JP, Barlow_Condensed } from "next/font/google";
import localFont from "next/font/local";

const fontNotoSansJp = Noto_Sans_JP({
  weight: ["400", "500"],
  subsets: ["latin"],
  variable: "--font-Noto-Sans-JP",
  display: "swap",
});

const fontBarlowCondensed = Barlow_Condensed({
  weight: ["400", "500", "600", "700"],
  subsets: ["latin"],
  variable: "--font-Barlow-Condensed",
  display: "swap",
});

const fontDelogy = localFont({
  src: "./Delogy-Regular.ttf",
  variable: "--font-Delogy",
  display: "swap",
});

export { fontNotoSansJp, fontBarlowCondensed, fontDelogy };

CSSの設定

_variables.scss

// Googleフォント
$Noto-Sans-JP: var(--font-Noto-Sans-JP), sans-serif;
$Barlow-Condensed: var(--font-Barlow-Condensed), sans-serif;
// ローカルフォント
$Delogy: var(--font-Delogy), sans-serif;

_base.scss

body {
  font-family: $Noto-Sans-JP;
}

_header.scss

.l-header {
    &_logo {
        font-family: $Delogy;
    }
    &_menu {
        font-family: $Barlow-Condensed;
    }
}

使用するページでの設定

layout.js

import { fontNotoSansJp } from "@/font/font";
import "../style/style.scss";
import { Header } from "./components/Header";

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body className={`${fontNotoSansJp.variable}`}>
        <Header />
        <div className="l-container">
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}

Header.js

import { fontBarlowCondensed, fontDelogy } from "@/font/font";
import React from "react";

export const Header = () => {
  return (
    <header className="l-header">
        <h1 className={`l-header_logo　${fontDelogy.variable}`}>Logo</h1>
        <button className={`l-header_btn ${fontBarlowCondensed.variable}`}>ボタン</button>
    </header>
  );
};

next/fontの使い方とは関係ないけど、display: "swap"ってなんの設定？

簡単にまとめるとフォントの読み込みが完了するまで文字が何も見えなくなってしまうのを防ぐ設定。

フォントを読み込むとき読み込まれるフォントが表示されるまでに３段階ある。
CSSでfont-display: swap;を指定することで②の代替フォントで描画の段階からにセットできるため文字が描画されない時間をなくせるということだ。

①ブロック期：フォントがローカルシステムにない場合、不可視代替フォントで描画する段階（文字が出てないため読めない）
↓
②スワップ期：ローカルにある代替フォントで描画する段階
↓
③読み込み完了: 代替フォントからWebフォントに切り替えて描画する

CSSのfont-display: swap;の設定をnext/fontで指定する書き方がdisplay: 'swap'になる。

参考サイト

next/font/について

display: "swap",について

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