外鄉人日常
NextJs
親愛的 我把字體縮小了

親愛的 我把字型檔縮小了

問題

當你的網站是在 Vercel 上部署,你又有用到 @vercel/og 來生成 Open Graph 圖片,並且在圖片上使用了自定義字型檔,這時候你可能會遇到一個問題:

Error: The Edge Function "api/og/[title]" size is 1.62 MB and your plan size limit is 1 MB. Learn More: https://vercel.link/edge-function-size

問題的原因是

@vercel/og only supports the Edge runtime.

而 Edge runtime 的客家方案限制是 1MB,然後你的字型檔實在是太大了...

太大

解法

  1. 安裝工具
npm install -g glyphhanger
pip install fonttools
  1. 準備字型檔:main-font.otf
  2. 要打包到子集字型的文字,寫在一個 txt 文件裡:text.txt(暫存用),把文字貼到 Online Unicode Converter (opens in a new tab) 產出 unicode
  3. 請 chatgpt 把產出來的 unicode 組進這串指令,記得要請他濾掉 0020-007E 的部分,不放心就自己兜,畢竟他有時候會胡謅。
 pyftsubset main-font.otf --output-file=subset-font.otf --unicodes=U+0020-007E,U+...

ta-da!你的字型檔已經縮小了,你可以把它放到你的專案裡,然後在你的 Edge Function 裡使用它。 最後壓出來的子集字型只要 16 KB,和原本的 1.62 MB 相比,整整小了 100 倍!這樣的大小應該沒理由卡 CD 了吧!?

參考資料

Open Graph (OG) Image Generation (opens in a new tab)

Vercel Functions Limitations (opens in a new tab)

glyphhanger (opens in a new tab)