Google Font

NextJS

Font Optimization

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

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

next/font/google

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

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


'''
return (
    <div className={NotoSansJP.className}>
);

BACK