@next/font

fontの自動最適化

自動最適化ってなに #??

外部へのreqを削除

privacyとperformanceを改善

build時にdownloadし、assetsと一緒に保持される

自動セルフホスティング機能

fontの自動self hostingってどういう意味 #??

CSSのサイズ調整でLayout Shiftをゼロにする

現状、対応しているのはGoogle FontsとTypekitのみ

code:ts

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

const inter = Inter();

ローカルフォントも次のようにして変数っぽくつける

code:ts

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });