目次
Web フォント
フォント (オープンソース) も参照🤤
Web フォントの形式
| 拡張子 | 形式 | 説明 |
|---|---|---|
| .woff2 | Web Open Font Format 2.0 | Web Open Font Format (WOFF) 2.0 は、Google によるリファレンス実装と共に公開された。フォントの圧縮に Brotli を使用するように改善された。 |
| .woff | Web Open Font Format 1.0 | Web Open Font Format (WOFF) は、ウェブページで使用するためのフォント形式である。WOFF は OpenType 又は TrueType 形式のフォントを圧縮し、XMLによるメタデータを追加したものとなっている。 |
| .ttf | TrueType | TrueType (トゥルータイプ) はデジタルフォントの規格である。Windows や macOS、Linux で標準的に利用されている。 |
| .eof | Embedded OpenType | Web ページの埋め込みフォントとして使用するために Microsoft が設計したコンパクトな OpenType フォントである。MS IE でのみサポートされる。 |
- EOT 形式と TTF 形式はデフォルトで圧縮されていない。
これらの形式を提供する場合は GZIP 圧縮を適用するように Web サーバーを設定する必要がある。 - WOFF はビルトインの圧縮付きである。WOFF 圧縮ツールで最適な圧縮設定を使用していることを確認すること。
- WOFF2 では独自の前処理アルゴリズムと圧縮アルゴリズムが使用されており、WOFF 形式よりも約 30% ファイルサイズが削減されている。
TrueType(.ttf) から Web Open Font Format(.woff, .woff2) への変換 (Linux)🤤
Linux では sfnt2woff (ttf ⇒ woff) と woff2_compress (ttf ⇒ woff2) コマンドが必要…🤔
$ dnf provides sfnt2woff woff2_compress
メタデータの期限切れの最終確認: 0:00:07 時間前の 2023年03月13日 16時00分49秒 に実施しました。 woff-0.20091126-26.fc37.x86_64 : Encoding and Decoding for Web Open Font Format(Woff) Repo : fedora 一致: ファイル名 : /usr/bin/sfnt2woff woff2-tools-1.0.2-15.fc37.x86_64 : Web Open Font Format 2.0 tools Repo : fedora 一致: ファイル名 : /usr/bin/woff2_compress
Fedora では woff と woff2-tools のパッケージをインストールする🤔
$ sudo dnf install woff woff2-tools
メタデータの期限切れの最終確認: 2:29:35 時間前の 2023年03月13日 13時35分15秒 に実施しました。 依存関係が解決しました。 ============================================================================================================== パッケージ アーキテクチャー バージョン リポジトリー サイズ ============================================================================================================== インストール: woff x86_64 0.20091126-35.fc37 updates 32 k woff2-tools x86_64 1.0.2-15.fc37 fedora 24 k トランザクションの概要 ============================================================================================================== インストール 2 パッケージ ダウンロードサイズの合計: 56 k インストール後のサイズ: 121 k これでよろしいですか? [y/N]: y パッケージのダウンロード: (1/2): woff-0.20091126-35.fc37.x86_64.rpm 158 kB/s | 32 kB 00:00 (2/2): woff2-tools-1.0.2-15.fc37.x86_64.rpm 91 kB/s | 24 kB 00:00 -------------------------------------------------------------------------------------------------------------- 合計 26 kB/s | 56 kB 00:02 トランザクションの確認を実行中 トランザクションの確認に成功しました。 トランザクションのテストを実行中 トランザクションのテストに成功しました。 トランザクションを実行中 準備 : 1/1 インストール中 : woff-0.20091126-35.fc37.x86_64 1/2 インストール中 : woff2-tools-1.0.2-15.fc37.x86_64 2/2 scriptletの実行中: woff2-tools-1.0.2-15.fc37.x86_64 2/2 検証 : woff2-tools-1.0.2-15.fc37.x86_64 1/2 検証 : woff-0.20091126-35.fc37.x86_64 2/2 インストール済み: woff-0.20091126-35.fc37.x86_64 woff2-tools-1.0.2-15.fc37.x86_64 完了しました!
オープンなライセンスの 白源/HackGen さんを Web フォントに変換する🤤
白源/HackGen さんをダウンロードする🤔
Copyright (c) 2019, Yuko OTAWARA. with Reserved Font Name "白源", "HackGen"
SIL Open Font License Version 1.1.
$ curl -LO https://github.com/yuru7/HackGen/releases/download/v2.8.0/HackGen_v2.8.0.zip
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
100 38.5M 100 38.5M 0 0 2819k 0 0:00:14 0:00:14 --:--:-- 3598k
$ curl -LO https://github.com/yuru7/HackGen/releases/download/v2.8.0/HackGen_NF_v2.8.0.zip
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
100 42.4M 100 42.4M 0 0 2808k 0 0:00:15 0:00:15 --:--:-- 3031k
$ unzip HackGen_v2.8.0.zip
Archive: HackGen_v2.8.0.zip creating: HackGen_v2.8.0/ inflating: HackGen_v2.8.0/HackGen-Bold.ttf inflating: HackGen_v2.8.0/HackGen-Regular.ttf inflating: HackGen_v2.8.0/HackGen35-Bold.ttf inflating: HackGen_v2.8.0/HackGen35-Regular.ttf inflating: HackGen_v2.8.0/HackGen35Console-Bold.ttf inflating: HackGen_v2.8.0/HackGen35Console-Regular.ttf inflating: HackGen_v2.8.0/HackGenConsole-Bold.ttf inflating: HackGen_v2.8.0/HackGenConsole-Regular.ttf
$ unzip HackGen_NF_v2.8.0.zip
Archive: HackGen_NF_v2.8.0.zip creating: HackGen_NF_v2.8.0/ inflating: HackGen_NF_v2.8.0/HackGen35ConsoleNF-Bold.ttf inflating: HackGen_NF_v2.8.0/HackGen35ConsoleNF-Regular.ttf inflating: HackGen_NF_v2.8.0/HackGen35ConsoleNFJ-Bold.ttf inflating: HackGen_NF_v2.8.0/HackGen35ConsoleNFJ-Regular.ttf inflating: HackGen_NF_v2.8.0/HackGenConsoleNF-Bold.ttf inflating: HackGen_NF_v2.8.0/HackGenConsoleNF-Regular.ttf inflating: HackGen_NF_v2.8.0/HackGenConsoleNFJ-Bold.ttf inflating: HackGen_NF_v2.8.0/HackGenConsoleNFJ-Regular.ttf
TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤
$ cd HackGen_v2.8.0
$ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}'
Processing HackGen-Bold.ttf => HackGen-Bold.woff2 Compressed 9099366 to 3604462. Processing HackGen-Regular.ttf => HackGen-Regular.woff2 Compressed 8646957 to 3431130. Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2 Compressed 9099743 to 3604929. Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2 Compressed 8647249 to 3430780. Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2 Compressed 9119537 to 3613329. Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2 Compressed 8671988 to 3441638. Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2 Compressed 9119552 to 3613732. Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2 Compressed 8669945 to 3444466.
$ ll
合計 153772 -rw-r--r-- 1 tomoyan tomoyan 11239764 12月 17 15:38 HackGen-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5243648 3月 13 16:21 HackGen-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3604568 3月 13 16:21 HackGen-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10695124 12月 17 15:38 HackGen-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5106724 3月 13 16:21 HackGen-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3431236 3月 13 16:22 HackGen-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 11239408 12月 17 15:38 HackGen35-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5243104 3月 13 16:22 HackGen35-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3605036 3月 13 16:22 HackGen35-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10694628 12月 17 15:38 HackGen35-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5105316 3月 13 16:22 HackGen35-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3430888 3月 13 16:23 HackGen35-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 11250760 12月 17 15:38 HackGen35Console-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5250216 3月 13 16:23 HackGen35Console-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3613436 3月 13 16:24 HackGen35Console-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10711388 12月 17 15:38 HackGen35Console-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5113100 3月 13 16:24 HackGen35Console-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3441744 3月 13 16:24 HackGen35Console-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 11251872 12月 17 15:38 HackGenConsole-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5252104 3月 13 16:24 HackGenConsole-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3613840 3月 13 16:25 HackGenConsole-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10710336 12月 17 15:38 HackGenConsole-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5115608 3月 13 16:25 HackGenConsole-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3444572 3月 13 16:25 HackGenConsole-Regular.woff2
$ cd HackGen_NF_v2.8.0
$ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}'
Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2 Compressed 9798935 to 4025600. Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2 Compressed 9351424 to 3847337. Processing HackGen35ConsoleNFJ-Bold.ttf => HackGen35ConsoleNFJ-Bold.woff2 Compressed 9824153 to 4020467. Processing HackGen35ConsoleNFJ-Regular.ttf => HackGen35ConsoleNFJ-Regular.woff2 Compressed 9376580 to 3848276. Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2 Compressed 9798945 to 4028240. Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2 Compressed 9349376 to 3849100. Processing HackGenConsoleNFJ-Bold.ttf => HackGenConsoleNFJ-Bold.woff2 Compressed 9824163 to 4022727. Processing HackGenConsoleNFJ-Regular.ttf => HackGenConsoleNFJ-Regular.woff2 Compressed 9374532 to 3849248.
$ ll
合計 167896 -rw-r--r-- 1 tomoyan tomoyan 12117088 12月 17 15:38 HackGen35ConsoleNF-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5754888 3月 13 16:27 HackGen35ConsoleNF-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 4025708 3月 13 16:28 HackGen35ConsoleNF-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 11577752 12月 17 15:38 HackGen35ConsoleNF-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5617728 3月 13 16:28 HackGen35ConsoleNF-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3847444 3月 13 16:28 HackGen35ConsoleNF-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 12142304 12月 17 15:38 HackGen35ConsoleNFJ-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5755804 3月 13 16:28 HackGen35ConsoleNFJ-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 4020572 3月 13 16:29 HackGen35ConsoleNFJ-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 11602908 12月 17 15:38 HackGen35ConsoleNFJ-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5618736 3月 13 16:29 HackGen35ConsoleNFJ-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3848384 3月 13 16:30 HackGen35ConsoleNFJ-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 12118276 12月 17 15:38 HackGenConsoleNF-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5756956 3月 13 16:30 HackGenConsoleNF-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 4028348 3月 13 16:30 HackGenConsoleNF-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 11576772 12月 17 15:38 HackGenConsoleNF-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5620112 3月 13 16:30 HackGenConsoleNF-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3849208 3月 13 16:31 HackGenConsoleNF-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 12143492 12月 17 15:38 HackGenConsoleNFJ-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5757956 3月 13 16:31 HackGenConsoleNFJ-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 4022832 3月 13 16:31 HackGenConsoleNFJ-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 11601928 12月 17 15:38 HackGenConsoleNFJ-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5621688 3月 13 16:31 HackGenConsoleNFJ-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3849356 3月 13 16:32 HackGenConsoleNFJ-Regular.woff2
WOFFConverter (Windows)
WOFFコンバータ (武蔵システム)
参考文献
ウェブフォントの最適化 | Web Fundamentals | Google Developers
自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース
Web Open Font Format - Wikipedia
WOFF (Web Open Font Format) - 開発者ガイド | MDN
ページ表示速度の計測・改善方法｜Googleが重視する理由と対策 | ウィルゲート
Webフォントのファイルサイズを小さくする - Carpe Diem
