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% ファイルサイズが削減されている。

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 さんをダウンロードする🤔
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.10.0/HackGen_NF_v2.10.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.9M  100 23.9M    0     0  2147k      0  0:00:11  0:00:11 --:--:-- 2812k

$ curl -LO https://github.com/yuru7/HackGen/releases/download/v2.10.0/HackGen_v2.10.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:00:01 --:--:--     0
100 38.5M  100 38.5M    0     0  1666k      0  0:00:23  0:00:23 --:--:-- 2248k

$ unzip HackGen_NF_v2.10.0.zip

Archive:  HackGen_NF_v2.10.0.zip
   creating: HackGen_NF_v2.10.0/
  inflating: HackGen_NF_v2.10.0/HackGen35ConsoleNF-Bold.ttf  
  inflating: HackGen_NF_v2.10.0/HackGen35ConsoleNF-Regular.ttf  
  inflating: HackGen_NF_v2.10.0/HackGenConsoleNF-Bold.ttf  
  inflating: HackGen_NF_v2.10.0/HackGenConsoleNF-Regular.ttf

$ unzip HackGen_v2.10.0.zip

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

2021/11/30 12:56 · ともやん

$ 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

WOFFコンバータ (武蔵システム)

Google Fonts
ウェブフォントの最適化 | Web Fundamentals | Google Developers
自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース
 Web Open Font Format - Wikipedia
WOFF (Web Open Font Format) - 開発者ガイド | MDN
ページ表示速度の計測・改善方法｜Googleが重視する理由と対策 | ウィルゲート
 Webフォントのファイルサイズを小さくする - Carpe Diem

Linuxでパッケージ化されているので、sfnt2woffとwoff2_compressが含まれるパッケージはこれで良さそうですけど試します🤔 $ sudo dnf install woff woff2-tools

漢方煎じ薬専門薬局、漢方薬局のすすめ🐶🐱🐘🐔🐰	2025/04/29 15:55	[ワタナベオイスター DHMBA Drink - ディーバドリンク🥤]
Firefox、Firefox Developer Edition	2025/04/27 08:53	[Firefox、Firefox Developer Edition]
pnpm - 高速、かつディスク容量効率が良いパッケージマネージャー	2025/04/27 08:07	[ERROR This project is configured to use yarn が発生する...🤪]
JupyterLab Extension 開発	2025/04/27 06:49	[error: subprocess-exited-with-error エラーでビルドが失敗する🤔]
Deno	2025/04/27 06:06	[参考文献]
Yarn - パッケージマネージャ	2025/04/25 10:46	[yarn のインストール]
JupyterLab memo	2025/04/24 10:29	[jlpm]
rsyncとsshを利用したリモートサーバの高速バックアップ	2025/04/24 04:39	[除外パターンを bash braces '{}' で効率よく書く✍😍]
🧠みそ😅	2025/04/23 17:52	[🧠みそ😅]

目次

Web フォント

Web フォントの形式

TrueType(.ttf) から Web Open Font Format(.woff, .woff2) への変換 (Linux)🤤

オープンなライセンスの白源/HackGen さんを Web フォントに変換する🤤

フォントのダウンロード

TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤

WOFFConverter (Windows)

参考文献

付録

ともやん・どっと・ねっと

目次

Web フォント

Web フォントの形式

TrueType(.ttf) から Web Open Font Format(.woff, .woff2) への変換 (Linux)🤤

オープンなライセンスの 白源/HackGen さんを Web フォントに変換する🤤

フォントのダウンロード

TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤

WOFFConverter (Windows)

参考文献

付録

オープンなライセンスの白源/HackGen さんを Web フォントに変換する🤤