Next.js のフォントについて

2024-10-28

フォントをカスタマイズする

Next.js でフォントをカスタマイズするためには以下のように import する。

import { Inter } from 'next/font/google';

参考：Font Optimization

使用可能なフォントは、

next/font/google

に遷移することで確認可能。VSCode なら F12 ショートカットキーを使えば定義元にジャンプできる。

本アプリの設定

import { M_PLUS_Rounded_1c } from 'next/font/google';

const mPlusRouunded = M_PLUS_Rounded_1c({
  subsets: ['latin'],
  display: 'swap',
  weight: ['500'],
});

const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <html lang="ja" className={mPlusRouunded.className}>
      <body>
        <Header />
        <main>{children}</main>
        <footer>
          <p>&copy; 2024 Kokoehon. All rights reserved.</p>
        </footer>
      </body>
    </html>
  );
};

subsets

や

weight

の値はジャンプした先で確認可能。例えば上記の

M_PLUS_Rounded_1c

では以下のように記述されている:

export declare function M_PLUS_Rounded_1c<
  T extends CssVariable | undefined = undefined
>(options: {
  weight:
    | '100'
    | '300'
    | '400'
    | '500'
    | '700'
    | '800'
    | '900'
    | Array<'100' | '300' | '400' | '500' | '700' | '800' | '900'>;
  style?: 'normal' | Array<'normal'>;
  display?: Display;
  variable?: T;
  preload?: boolean;
  fallback?: string[];
  adjustFontFallback?: boolean;
  subsets?: Array<
    | 'cyrillic'
    | 'cyrillic-ext'
    | 'greek'
    | 'greek-ext'
    | 'hebrew'
    | 'latin'
    | 'latin-ext'
    | 'vietnamese'
  >;
}): T extends undefined ? NextFont : NextFontWithVariable;

参考

Font Optimization