Zenn
✋

NotoSansJP が OTF/TTF 形式しか配布されていないので woff2 に変換する Dockerfile を書いた

2023/01/04に公開
Docker
Next.js
font
tech

今回 Next.js にて Optimizing Fonts を利用して Google フォントを使わずサーバからフォントの配布をしたかったが OTF/TTF 形式しかなかったのでメモ。

なぜ woff2 なのか

一言でいうと 「woff2 形式を使うと圧縮率が良いのでデータ通信量の削減に繋がる。」

https://e-words.jp/w/WOFF.html

しかし, googlefonts では NotoSansJP が OTF/TTF 形式しか配布されていない。

https://github.com/googlefonts/noto-cjk

woff2 に変換するとどうなったか？

一例ではあるが 8.1MB から 4.1MB にすることが出来た通信量的に見るとこの差は大きい。

woff2 に変換する Dockerfile

woff2 に変換するための Dockerfile を記述した。マルチステートビルドなどに活用して欲しい

  1. woff2 を変換するためのツール をインストール
  2. フォントを GitHub から取得してくる
  3. woff2 を変換するツールを使用し woff2 に変換する
FROM alpine:3.14

WORKDIR /font

RUN apk add --no-cache git make g++ && \
    git clone --recursive https://github.com/google/woff2.git && \
    cd woff2 && \
    make clean all

RUN wget https://github.com/googlefonts/noto-cjk/releases/download/Sans2.004/01_NotoSansCJK-OTF-VF.zip && \
    unzip 01_NotoSansCJK-OTF-VF.zip && \
    rm 01_NotoSansCJK-OTF-VF.zip && \
    ./woff2/woff2_compress Variable/OTF/Subset/NotoSansJP-VF.otf

しかしこのままではホスト側に持ってくることが出来ません。

1行で docker build しホスト側の (project)/pages 以下に NotoSansJP-VF.woff2 を配置するコマンドも置いておきます。

docker build -t font-builder . && docker run -v $(pwd):/host -it font-builder sh -c "cp /font/Variable/OTF/Subset/NotoSansJP-VF.woff2 /host/pages/NotoSansJP-VF.woff2 && exit"

Discussion