UbuntuシステムでOTFフォントをWeb用に活用する方法

1. OTFとは何か？

OTF(OpenType Font)はAdobeとMicrosoftが共同開発したフォントフォーマットで、
.ttf(TrueType Font)の機能を拡張し、さらに高度なタイポグラフィ機能を含んでいます。

✅ 様々な書体機能 (リガチャ、代替文字など)
✅ Unicodeサポート
✅ .ttfよりも汎用性が広い (特に専門家用デザインツールで好まれる)

Ubuntuでは特に システム用またはPDFレンダリング用のフォントとしてOTFが多く使用されます。

2. UbuntuにインストールされたOTFフォントを確認する

ターミナルで次のコマンドで確認できます:

fc-list | grep "\.otf"

特定のフォント名でフィルタリングすることもできます:

fc-list | grep "Nimbus Sans" | grep "\.otf"

3. システムフォントをウェブで使用したいとき

ウェブではシステムにインストールされたフォントをそのまま使用することはできません。
なぜなら、ウェブサイトにアクセスする クライアントのコンピュータにはそのフォントがないかもしれないからです。

→ したがってフォントをウェブサーバーで提供する必要があり、最も効率的な形式は .woff2です。

4. OTF → WOFF2 変換が肝心です！

OTF to WOFF2 font conversion illustration

📦 変換ツールのインストール

sudo apt install woff2

🔄 変換コマンド

woff2_compress YourFont.otf

→ 結果: YourFont.woff2

自動変換スクリプト

#!/bin/bash
export LC_ALL=C
# [1] 対象フォント名
read -p "変換するフォントを入力してください: " FONT_NAME

# [2] 結果保存パスの設定
DEST_DIR="$HOME/fonts/$(echo $FONT_NAME | tr ' ' '_' | tr '[:upper:]' '[:lower:]')/woff2"

# [3] 変換ツールを確認
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' コマンドがありません。インストール後に使用してください:"
    echo "    sudo apt install woff2"
    exit 1
fi

# [4] 結果フォルダを作成
mkdir -p "$DEST_DIR"

# [5] システムフォントリストから.otfかつFONT_NAMEを含むパスのみを抽出
echo "🔍 '$FONT_NAME' フォントを.otf拡張子で検索中..."
font_paths=$(fc-list | grep "$FONT_NAME" | grep "\\.otf" | cut -d: -f1 | sort | uniq)

if [ -z "$font_paths" ]; then
    echo "❌ '$FONT_NAME' に該当する.otfフォントが見つかりませんでした。"
    exit 1
fi

# [6] 変換実行ループ
for font_file in $font_paths; do
    base_name=$(basename "$font_file" .otf)
    output_file="$DEST_DIR/${base_name}.woff2"

    if [ -f "$output_file" ]; then
        echo "⚠️  すでに存在しています: $output_file → スキップします"
        continue
    fi

    echo "🔄 変換中: $base_name.otf → $base_name.woff2"

    if ! cp "$font_file" "/tmp/${base_name}.otf"; then
        echo "❌ コピー失敗: $font_file → スキップします"
        continue
    fi

    woff2_compress "/tmp/${base_name}.otf"
    mv "/tmp/${base_name}.woff2" "$output_file"
    rm "/tmp/${base_name}.otf"
    echo "✅ 保存されました: $output_file"
done

echo "🎉 すべての変換が完了しました！保存場所: $DEST_DIR"

必要な方は、私が作成した上記スクリプトを使ってみてください。とてもよく動作します。

5. 変換されたwoff2ファイルをウェブで使用する方法

ウェブプロジェクトの static/fonts/ ディレクトリに入れ、CSSで宣言:

@font-face {
  font-family: 'Your Custom Font';
  src: url('/static/fonts/YourFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

これでHTMLで次のように使うことができます:

<body style="font-family: 'Your Custom Font', sans-serif;">
  こんにちは！カスタムフォントです。
</body>

6. 結論

項目	要点
`.otf` フォント	Ubuntuシステムに多くインストールされている
ウェブで使用	クライアントPCにはないので `.woff2` への変換が必要
最適化方法	`woff2_compress`で変換した後、staticから配信
結果	迅速なフォントロード、専用フォントデザインの反映が可能

Ubuntuシステムをウェブサービスとより密接に結び付けたい開発者は、
otf → woff2 変換はぜひ知っておくべき武器です。💪