Skip to content

Instantly share code, notes, and snippets.

@azu

azu/next-font.md

Created July 29, 2024 15:36
Show Gist options
  • Save azu/6fe1a09aebca81fe9afbb7c911e95bc5 to your computer and use it in GitHub Desktop.
Save azu/6fe1a09aebca81fe9afbb7c911e95bc5 to your computer and use it in GitHub Desktop.
Download ZIP
next/fontの実装メモ
Raw
next-font.md

next/fontの実装

https://github.com/vercel/next.js/blob/037783445324a85d04675524c941df21b3f4fbb5/packages/font/src/google

  1. next/fontの関数からパラメータを組み立てて https://fonts.googleapis.com/css2?family=xxx に対してリクエスト
  1. ダウンロードしたCSSの src: url(...) を抜き出してwebfontファイルを保存
  1. ダウンロードしたCSSの src: url(...) を保存したファイルパスへ書き換え
  1. 作ったCSSをページに埋め込む( CSSにはGoogle Fontsのパスなどを書き換えた @font-face が定義されている)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment