ウェブタイポグラフィは、ユーザーエクスペリエンスとブランドアイデンティティを形成する重要な要素です。
Djangoや静的ウェブプロジェクトを作成していると、.ttfや.woff2といったさまざまなフォントフォーマットに出会います。

この記事では、.ttfと.woff2の違い、なぜウェブ開発者が.woff2を好むのか、
そしてUbuntuで.ttfを.woff2に変換する方法を説明します。
さらに、変換作業を自動化するためのBashスクリプトも提供します。

1. TTFとは？

TTF (TrueType Font)は、AppleとMicrosoftが共同で開発した汎用フォントフォーマットです。
印刷と画面出力の両方をサポートし、さまざまなオペレーティングシステムで広く使用されています。

• ✅ 利点:
• すべてのオペレーティングシステムで広くサポートされている

• 画像レンダリングやデスクトップアプリで適している

• ❌ 欠点（ウェブ基準）:

• ファイルサイズが大きい
• ウェブ最適化がされていない
• 読み込み速度が遅い

2. WOFF2とは？

WOFF2 (Web Open Font Format 2)は、ウェブ専用に設計された最新の圧縮フォントフォーマットです。

• ✅ 利点:
• 非常に高い圧縮率（TTFに対して最大30%小さい）
• 高速な読み込み、ネットワーク最適化

• すべての最新ブラウザで完全サポート

• ❌ 欠点:

• デスクトップアプリや一部の画像レンダリングには不適切
• .ttfまたは.otfからの別途変換が必要

3. なぜウェブ開発者はWOFF2を使うべきなのか？

ウェブパフォーマンスとユーザーエクスペリエンスを考慮すると、特別な理由がない限り、常にWOFF2を使用することをお勧めします。

4. UbuntuでTTF → WOFF2に変換する

必要なパッケージのインストール

sudo apt update
sudo apt install woff2

インストール後、woff2_compressというコマンドで変換が可能です。

手動変換コマンド

woff2_compress Poppins-Regular.ttf

同じディレクトリにPoppins-Regular.woff2ファイルが作成されます。

5. ボーナス: 自動変換Bashスクリプト

以下のスクリプトを使用すると、.ttfファイルを一度に変換できます。bashスクリプトに慣れている方は、コピーして使用してください。

convert-ttf-to-woff2.sh

#!/bin/bash

# 変換対象ディレクトリ
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# woff2_compressコマンドの確認
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' コマンドを見つけることができませんでした。"
    echo "次のコマンドでインストールしてください:"
    echo "    sudo apt install woff2"
    exit 1
fi

# 結果ディレクトリの作成
mkdir -p "$OUTPUT_DIR"
echo "📁 変換結果ディレクトリ: $OUTPUT_DIR"

# 変換を実行
echo "🔄 TTF → WOFF2 変換中..."

find "$FONT_DIR" -maxdepth 1 -type f -name "*.ttf" | while read -r ttf_file; do
    filename=$(basename "$ttf_file")
    base="${filename%.ttf}"
    output_file="$OUTPUT_DIR/$base.woff2"

    if [[ -f "$output_file" ]]; then
        echo "⚠️  既に存在します: $output_file (スキップ)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ 変換完了: $output_file"
done

echo "🎉 変換がすべて完了しました！"

✅ まとめ

• .woff2はウェブ専用に設計された最新フォーマットで、性能と容量において優れています。
• .ttfはウェブでは非効率ですが、画像レンダリングなど他の用途には有用です。
• 自動変換スクリプトを活用することで、プロジェクトのフォント管理をより効率的に行うことができます。

皆さんのウェブプロジェクトのフォントパフォーマンス向上に役立てば幸いです！