4．Google Font

2025/09/16 NextJS

Font Optimization

Headタグ内でlinkタグを書いてフォントを読み込む場合、ブラウザからGoogleへの通信が発生するため、ページの読み込み速度が低下します

next/font/googleを利用すると、Next.jsサーバー内にデフォルトで入っているGoogleFontが表示されるため、フォントをダウンロードするためにブラウザからGoogleへ通信する必要がなくなり、ページの読み込み速度や通信料が削減されます

src/pages/_app.js

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

const NotoSansJP = Noto_Sans_JP({
    weight: ["400", "700"],  <--- font-weight:400,700を使います
    subsets: ["latin"],  <--- 必要な言語だけ読み込みます（日本語はlatinの中に含まれています）
    display: "swap",
});


export default function App({ Component, pageProps }) {
  return (
    <div className={NotoSansJP.className}>
      <Component {...pageProps} />
    </div>
  );
}

src/components/Header.js

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

const robotoCondensed = Roboto_Condensed({
  subsets: ['latin'],
  weight: ['400', '700', '900'],
  display: 'swap',
});

export default function Header() {
  return (
    <p className={robotoCondensed.className}></p>
  );
}

BACK