====== 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 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 フォントに変換する🤤 ==== [[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.\\ 
$ curl -LO https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_NF_v2.9.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 23.0M  100 23.0M    0     0  8693k      0  0:00:02  0:00:02 --:--:-- 11.2M

$ curl -LO https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_v2.9.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  9460k      0  0:00:04  0:00:04 --:--:-- 11.3M

$ unzip HackGen_v2.9.0.zip

Archive:  HackGen_v2.9.0.zip
   creating: HackGen_v2.9.0/
  inflating: HackGen_v2.9.0/HackGen-Bold.ttf  
  inflating: HackGen_v2.9.0/HackGen-Regular.ttf  
  inflating: HackGen_v2.9.0/HackGen35-Bold.ttf  
  inflating: HackGen_v2.9.0/HackGen35-Regular.ttf  
  inflating: HackGen_v2.9.0/HackGen35Console-Bold.ttf  
  inflating: HackGen_v2.9.0/HackGen35Console-Regular.ttf  
  inflating: HackGen_v2.9.0/HackGenConsole-Bold.ttf  
  inflating: HackGen_v2.9.0/HackGenConsole-Regular.ttf

$ unzip HackGen_NF_v2.9.0.zip

Archive:  HackGen_NF_v2.9.0.zip
   creating: HackGen_NF_v2.9.0/
  inflating: HackGen_NF_v2.9.0/HackGen35ConsoleNF-Bold.ttf  
  inflating: HackGen_NF_v2.9.0/HackGen35ConsoleNF-Regular.ttf  
  inflating: HackGen_NF_v2.9.0/HackGenConsoleNF-Bold.ttf  
  inflating: HackGen_NF_v2.9.0/HackGenConsoleNF-Regular.ttf
==== TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤 ==== 
$ cd HackGen_v2.9.0
$ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}'

Processing HackGen-Bold.ttf => HackGen-Bold.woff2
Compressed 9099366 to 3604694.
Processing HackGen-Regular.ttf => HackGen-Regular.woff2
Compressed 8646957 to 3431083.
Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2
Compressed 9099743 to 3605098.
Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2
Compressed 8647249 to 3431110.
Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2
Compressed 9119537 to 3613699.
Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2
Compressed 8671988 to 3441818.
Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2
Compressed 9119552 to 3614099.
Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2
Compressed 8669945 to 3443688.

$ ll

合計 153772
-rw-r--r-- 1 tomoyan tomoyan 11239764  5月  3 17:51 HackGen-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5243656  9月 23 10:52 HackGen-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3604800  9月 23 10:52 HackGen-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10695124  5月  3 17:51 HackGen-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5106732  9月 23 10:52 HackGen-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3431188  9月 23 10:53 HackGen-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 11239408  5月  3 17:51 HackGen35-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5243108  9月 23 10:53 HackGen35-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3605204  9月 23 10:53 HackGen35-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10694628  5月  3 17:51 HackGen35-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5105320  9月 23 10:53 HackGen35-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3431216  9月 23 10:54 HackGen35-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 11250760  5月  3 17:51 HackGen35Console-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5250220  9月 23 10:54 HackGen35Console-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3613804  9月 23 10:54 HackGen35Console-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10711388  5月  3 17:51 HackGen35Console-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5113104  9月 23 10:54 HackGen35Console-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3441924  9月 23 10:55 HackGen35Console-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 11251872  5月  3 17:51 HackGenConsole-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  5252108  9月 23 10:55 HackGenConsole-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  3614204  9月 23 10:55 HackGenConsole-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 10710336  5月  3 17:51 HackGenConsole-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  5115612  9月 23 10:55 HackGenConsole-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  3443796  9月 23 10:56 HackGenConsole-Regular.woff2

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

Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2
Compressed 10551428 to 4365109.
Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2
Compressed 10103895 to 4187458.
Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2
Compressed 10551379 to 4366483.
Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2
Compressed 10101788 to 4189298.

$ ll

合計 90800
-rw-r--r-- 1 tomoyan tomoyan 13060044  5月  3 17:51 HackGen35ConsoleNF-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  6238424  9月 23 11:01 HackGen35ConsoleNF-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  4365216  9月 23 11:01 HackGen35ConsoleNF-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 12520684  5月  3 17:51 HackGen35ConsoleNF-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  6101096  9月 23 11:01 HackGen35ConsoleNF-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  4187564  9月 23 11:02 HackGen35ConsoleNF-Regular.woff2
-rw-r--r-- 1 tomoyan tomoyan 13061184  5月  3 17:51 HackGenConsoleNF-Bold.ttf
-rw-r--r-- 1 tomoyan tomoyan  6240728  9月 23 11:02 HackGenConsoleNF-Bold.woff
-rw-r--r-- 1 tomoyan tomoyan  4366588  9月 23 11:02 HackGenConsoleNF-Bold.woff2
-rw-r--r-- 1 tomoyan tomoyan 12519656  5月  3 17:51 HackGenConsoleNF-Regular.ttf
-rw-r--r-- 1 tomoyan tomoyan  6104016  9月 23 11:02 HackGenConsoleNF-Regular.woff
-rw-r--r-- 1 tomoyan tomoyan  4189404  9月 23 11:03 HackGenConsoleNF-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]]\\