azu/next-font.md

Created July 29, 2024 15:36

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/azu/6fe1a09aebca81fe9afbb7c911e95bc5.js"></script>
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

next/fontの関数からパラメータを組み立てて https://fonts.googleapis.com/css2?family=xxx に対してリクエスト

https://github.com/vercel/next.js/blob/abe8b1e0a8c4db297d9a05b66d7aa59e8d7afca4/packages/font/src/google/loader.ts#L57-L87

ダウンロードしたCSSの src: url(...) を抜き出してwebfontファイルを保存

https://github.com/vercel/next.js/blob/abe8b1e0a8c4db297d9a05b66d7aa59e8d7afca4/packages/font/src/google/loader.ts#L110-L133

ダウンロードしたCSSの src: url(...) を保存したファイルパスへ書き換え

https://github.com/vercel/next.js/blob/abe8b1e0a8c4db297d9a05b66d7aa59e8d7afca4/packages/font/src/google/loader.ts#L151-L157

作ったCSSをページに埋め込む( CSSにはGoogle Fontsのパスなどを書き換えた @font-face が定義されている)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment