====== Web フォント ====== [[:open_source:fonts|フォント]] (オープンソース) も参照🤤\\ ===== Web フォントの形式 ===== ^ 拡張子 ^ 形式 ^ 説明 ^ | .woff2 | [[https://www.w3.org/TR/WOFF2/|Web Open Font Format 2.0]] | [[wwjp>Web_Open_Font_Format|Web Open Font Format (WOFF)]] 2.0 は、Google によるリファレンス実装と共に公開された。フォントの圧縮に [[wwjp>Brotli|Brotli]] を使用するように改善された。 | | .woff | [[https://www.w3.org/TR/WOFF/|Web Open Font Format 1.0]] | [[wwjp>Web_Open_Font_Format|Web Open Font Format (WOFF)]] は、ウェブページで使用するためのフォント形式である。WOFF は OpenType 又は TrueType 形式のフォントを圧縮し、XMLによるメタデータを追加したものとなっている。 | | .ttf | [[wwjp>TrueType|TrueType]] | TrueType (トゥルータイプ) はデジタルフォントの規格である。Windows や macOS、Linux で標準的に利用されている。 | | .eof | [[wwjp>Embedded_OpenType|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 -y woff woff2-tools

リポジトリの更新を読み込み中:
リポジトリを読み込みました。
Package                              Arch       Version                               Repository              Size
Installing:
 woff                                x86_64     0.20091126-41.fc41                    fedora              72.2 KiB
 woff2-tools                         x86_64     1.0.2-20.fc41                         fedora              51.8 KiB

Transaction Summary:
 Installing:         2 packages

パッケージサイズ 57 KiB 、ダウンロードサイズ 57 KiB 。
完了後、124 KiB のサイズが利用されます（インストール 124 KiB、削除 0 B）。
[1/2] woff-0:0.20091126-41.fc41.x86_64                                    100% |  37.0 KiB/s |  32.8 KiB |  00m01s
[2/2] woff2-tools-0:1.0.2-20.fc41.x86_64                                  100% |  25.8 KiB/s |  23.7 KiB |  00m01s
------------------------------------------------------------------------------------------------------------------
[2/2] Total                                                               100% |  16.5 KiB/s |  56.6 KiB |  00m03s
トランザクションを実行中
[1/4] パッケージ ファイルを検証                               100% | 500.0   B/s |   2.0   B |  00m00s
[2/4] トランザクションの準備                                   100% |   1.0   B/s |   2.0   B |  00m01s
[3/4] インストール中 woff2-tools-0:1.0.2-20.fc41.x86_64            100% | 264.3 KiB/s |  53.4 KiB |  00m00s
[4/4] インストール中 woff-0:0.20091126-41.fc41.x86_64              100% |  35.4 KiB/s |  73.9 KiB |  00m02s
完了しました！

==== オープンなライセンスの白源/HackGen さんを Web フォントに変換する🤤 ==== [[git>yuru7/HackGen|白源/HackGen]] さんをダウンロードする🤔\\ [[git>yuru7/HackGen/blob/master/LICENSE|Copyright (c) 2019, Yuko OTAWARA. with Reserved Font Name "白源", "HackGen"]]\\ [[wwjp>SIL_Open_Font_License|SIL Open Font License]] Version 1.1.\\ {{page>linux:fonts#フォントのダウンロード}} ==== TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤 ====

$ cd HackGen_NF_v2.10.0
$ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}'

Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2
Compressed 10875327 to 4569738.
Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2
Compressed 10427620 to 4393224.
Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2
Compressed 10876056 to 4571220.
Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2
Compressed 10426503 to 4395310.

$ ll

合計 94328
-rw-r--r-- 1 tomoyan tomoyan 13462380 12月 29 16:04 HackGen35ConsoleNF-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  6531888  4月 12 10:54 HackGen35ConsoleNF-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  4569844  4月 12 10:55 HackGen35ConsoleNF-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 12922844 12月 29 16:04 HackGen35ConsoleNF-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  6398440  4月 12 10:55 HackGen35ConsoleNF-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  4393332  4月 12 10:56 HackGen35ConsoleNF-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 13464288 12月 29 16:04 HackGenConsoleNF-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  6534948  4月 12 10:56 HackGenConsoleNF-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  4571328  4月 12 10:57 HackGenConsoleNF-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 12922800 12月 29 16:04 HackGenConsoleNF-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  6401656  4月 12 10:57 HackGenConsoleNF-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  4395416  4月 12 10:58 HackGenConsoleNF-Regular.woff2

$ cd ../HackGen_v2.10.0
$ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}'

Processing HackGen-Bold.ttf => HackGen-Bold.woff2
Compressed 9098739 to 3604203.
Processing HackGen-Regular.ttf => HackGen-Regular.woff2
Compressed 8646368 to 3431454.
Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2
Compressed 9098354 to 3603655.
Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2
Compressed 8645686 to 3430103.
Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2
Compressed 9118148 to 3611814.
Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2
Compressed 8670425 to 3441278.
Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2
Compressed 9118925 to 3614983.
Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2
Compressed 8669356 to 3442626.

$ ll

合計 154060
-rw-r--r-- 1 tomoyan tomoyan 11239136 12月 29 16:04 HackGen-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5282724  4月 12 10:59 HackGen-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3604308  4月 12 11:00 HackGen-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10694536 12月 29 16:04 HackGen-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5149508  4月 12 11:00 HackGen-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3431560  4月 12 11:00 HackGen-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 11238016 12月 29 16:04 HackGen35-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5281588  4月 12 11:01 HackGen35-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3603760  4月 12 11:01 HackGen35-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10693068 12月 29 16:04 HackGen35-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5147932  4月 12 11:01 HackGen35-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3430208  4月 12 11:02 HackGen35-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 11249376 12月 29 16:04 HackGen35Console-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5288700  4月 12 11:02 HackGen35Console-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3611920  4月 12 11:02 HackGen35Console-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10709828 12月 29 16:04 HackGen35Console-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5155420  4月 12 11:02 HackGen35Console-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3441384  4月 12 11:03 HackGen35Console-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 11251244 12月 29 16:04 HackGenConsole-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5291272  4月 12 11:03 HackGenConsole-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3615088  4月 12 11:04 HackGenConsole-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10709744 12月 29 16:04 HackGenConsole-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5158008  4月 12 11:04 HackGenConsole-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3442732  4月 12 11:04 HackGenConsole-Regular.woff2

===== WOFFConverter (Windows) ===== {{:web:woff_converter_001.png?80|WOFFConverter Icon}}\\ [[https://opentype.jp/woffconv.htm|WOFFコンバータ]] (武蔵システム)\\ {{:web:woff_converter_002.png?400|WOFFConverter 002}}\\ ===== 参考文献 ===== [[https://fonts.google.com|Google Fonts]]\\ [[https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja|ウェブフォントの最適化 | Web Fundamentals | Google Developers]]\\ [[https://01earth.jp/web-create/coding/web-font/|自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース]]\\ [[https://en.wikipedia.org/wiki/Web_Open_Font_Format|Web Open Font Format - Wikipedia]]\\ [[https://developer.mozilla.org/ja/docs/Web/Guide/WOFF|WOFF (Web Open Font Format) - 開発者ガイド | MDN]]\\ [[https://www.willgate.co.jp/promonista/page-speed/|ページ表示速度の計測・改善方法｜Googleが重視する理由と対策 | ウィルゲート]]\\ [[https://christina04.hatenablog.com/entry/2017/04/12/002333|Webフォントのファイルサイズを小さくする - Carpe Diem]]\\ ==== 付録 ==== [[tw>tomoyan596sp/status/1567951237596983296|Linuxでパッケージ化されているので、sfnt2woffとwoff2_compressが含まれるパッケージはこれで良さそうですけど試します🤔 $ sudo dnf install woff woff2-tools]]\\