Google Fontsだと字詰めが効かない理由 ~OTFとTTFの違い -Shippori Mincho実例で徹底解説-

この記事では、OTFとTTFの違いをWebフォント視点で徹底解説。

✅ OTFとTTFの技術的な違い
✅ Webフォントで字詰め（palt）が効かない理由
✅ Google Fonts版とOTF版の実例比較
✅ FontToolsでOTFをwoff2に変換する方法
✅ unpkg.comでCDN配信する手順
✅ font-feature-settingsの使い方

Google FontsのTTF版では効かない'palt'（約物の字詰め）が、OTF版では効く理由、FontToolsでの変換方法、CDN「unpkg.com」での配信方法まで実例付きで解説します。

1. なぜOTF版を使うのか

きっかけ

Webサイトで「しっぽり明朝」を使おうとしたとき、こんな疑問を持ちました。

「Google Fontsで使える "Shippori Mincho" と、公式サイトからダウンロードできる "Shippori Mincho OTF" は何が違うの？」

実際に使ってみると：

/* Google Fonts版 */
font-family: "Shippori Mincho", serif;
font-feature-settings: 'palt';  /* ← 効かない！❌ */

/* OTF版（woff2変換／unpkg配信） */
font-family: "Shippori Mincho OTF", serif;
font-feature-settings: 'palt';  /* ← 効く！✅ */

結論：字詰めが効く！

この違いを理解するために、OTFとTTFの違いを深掘りします。

2. OTFとTTFの基本的な違い

フォーマットの歴史

項目	TTF（TrueType Font）	OTF（OpenType Font）
開発元	Apple + Microsoft（1980年代）	Adobe + Microsoft（1990年代）
字形データ	TrueTypeアウトライン	PostScript（Type 1）またはTrueType
機能	基本的な機能のみ	高度なタイポグラフィ機能
ファイルサイズ	やや小さい	やや大きい
互換性	高い	高い（TTFの上位互換）

技術的な違い

TTF（TrueType Font）

TTFフォントファイル
├── グリフデータ（字形）
├── カーニングテーブル
├── 基本的なメトリクス
└── ヒンティング情報

特徴：

シンプルな構造
高速な描画
基本的な文字表示に特化

OTF（OpenType Font）

OTFフォントファイル
├── グリフデータ（字形）
├── カーニングテーブル
├── 基本的なメトリクス
├── ヒンティング情報
└── OpenType機能テーブル ← これが重要！
    ├── palt（プロポーショナルメトリクス）
    ├── kern（高度なカーニング）
    ├── liga（合字）
    ├── calt（文脈依存の字形）
    └── その他多数...

特徴：

高度なタイポグラフィ機能
文脈に応じた字形変換
言語ごとの最適化
プロフェッショナル向け

3. 実例比較：Shippori Mincho の場合

さて、難しいですね。ぼくも書いている部分について、よく理解できていません。
実際どうなのかという部分について解説します。

入手方法の違い

Shippori Mincho（TTF版）

Google Fontsから利用:

<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap" rel="stylesheet">

メリット：

✅ CDNですぐに使える
✅ バージョン管理不要

デメリット：

❌ OpenType機能が制限されている
❌ font-feature-settings: 'palt' が効かない

Shippori Mincho OTF（OTF版）

公式サイトからダウンロード:

「OTF版フォントファイルをダウンロード」から入手

Webフォント化の手順:

# 1. ダウンロードしたOTFファイル
ShipporiMincho-OTF-Regular.otf
ShipporiMincho-OTF-Bold.otf
...

# 2. FontToolsでwoff/woff2に変換
pyftsubset ShipporiMincho-OTF-Regular.otf 
  --output-file=ShipporiMincho-OTF-Regular.woff2 
  --flavor=woff2 
  --layout-features='*'

# 3. unpkg.comで配信
https://unpkg.com/@sarap422/font-shippori-mincho-otf@1.0.0/

メリット：

✅ すべてのOpenType機能が使える
✅ font-feature-settings: 'palt' が効く
✅ プロフェッショナルな字詰め

デメリット：

⚠️ 変換・公開の手間がかかる
⚠️ 自分でバージョン管理が必要

4. なぜGoogle Fonts版では字詰めが効かないのか

Google Fontsの最適化処理

Google Fontsは、高速配信のためにフォントファイルを最適化しています。

最適化の内容:

元のOTFフォント（例：10MB）
├── グリフデータ（字形）
├── OpenType機能テーブル
│   ├── palt（プロポーショナルメトリクス）
│   ├── vpal（縦書き用メトリクス）
│   ├── kern（高度なカーニング）
│   ├── liga（合字）
│   └── その他多数...
└── ヒンティング情報

↓ Google Fontsの最適化処理

TTF版（Google Fonts配信：約3MB）
├── グリフデータ（字形）← サブセット化
├── 基本的なカーニングテーブル
└── ヒンティング情報（簡略化）

削減される内容:

❌ OpenType機能テーブルの大半が削除
❌ 使用頻度の低いグリフを削除
❌ 複雑なヒンティング情報を簡略化

結果:

✅ ファイルサイズが約1/3に
✅ 読み込み速度が向上
❌ 高度なタイポグラフィ機能が使えない

具体例：'palt'機能の有無

Google Fonts版（TTF）:

# フォント内のOpenType機能を確認
pyftfeatfreeze ShipporiMincho-Regular.ttf

# 出力例
kern: カーニング機能あり
liga: 合字機能あり
palt: 機能なし ← ❌

OTF版（fontdasu.com）:

# フォント内のOpenType機能を確認
pyftfeatfreeze ShipporiMincho-OTF-Regular.otf

# 出力例
kern: カーニング機能あり
liga: 合字機能あり
palt: 機能あり ← ✅
vpal: 縦書き用機能あり
vert: 縦書き用字形あり
...

5. OpenType機能（palt）の効果

'palt'とは？

Proportional Alternate Widths（プロポーショナル代替幅）

日本語の約物（句読点・括弧など）の前後の空白を調整し、美しい字詰めを実現する機能。

視覚的な違い

palt無効の場合

【palt無効】
吾輩は CAT である。名前はまだ None. どこで生れたか "TON" と
Idea がつかぬが、何でも薄暗いじめじめした所で Meow Meow 泣いて
いた事だけは記憶している。吾輩はここではじめて HUMAN というも
のを見た。しかもあとで聞くとそれは &0123-456-789! であったそうだ。
       ↑           ↑
     全角分の空白

palt有効の場合

【palt有効】
吾輩は CAT である。名前はまだ None. どこで生れたか "TON" と
Idea がつかぬが、何でも薄暗いじめじめした所で Meow Meow 泣いて
いた事だけは記憶している。吾輩はここではじめて HUMAN というも
のを見た。しかもあとで聞くとそれは &0123-456-789! であったそうだ。
    ↑        ↑
  詰まった空白

CSS での指定方法

body {
  font-family: 'Shippori Mincho OTF', serif;
  font-feature-settings: 'palt';
}

効果がある文字

文字種	例	効果
句読点	。、	後ろの空白が詰まる
括弧	「」『』()	前後の空白が調整される
記号	：；！？	前後の空白が詰まる
中点	・	前後の空白が調整される

6. OTFをWebフォント化する手順

必要なツール

Python 3.x
FontTools（pyftsubset）
Brotli（woff2圧縮用）

インストール

# FontToolsとBrotliをインストール
pip install fonttools brotli

変換コマンド

基本的な変換（woff2）

pyftsubset ShipporiMincho-OTF-Regular.otf 
  --output-file=ShipporiMincho-OTF-Regular.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --no-hinting

オプション解説:

オプション	説明
`--output-file`	出力ファイル名
`--flavor=woff2`	woff2形式で出力
`--layout-features='*'`	すべてのOpenType機能を保持（重要！）
`--no-hinting`	ヒンティング情報を削除（Webでは不要）

woff形式も生成する場合

# woff2
pyftsubset ShipporiMincho-OTF-Regular.otf 
  --output-file=ShipporiMincho-OTF-Regular.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --no-hinting

# woff（古いブラウザ用）
pyftsubset ShipporiMincho-OTF-Regular.otf 
  --output-file=ShipporiMincho-OTF-Regular.woff 
  --flavor=woff 
  --layout-features='*' 
  --no-hinting

すべてのウェイトを一括変換

#!/bin/bash

# 変換対象のファイル一覧
fonts=(
  "ShipporiMincho-OTF-Regular"
  "ShipporiMincho-OTF-Medium"
  "ShipporiMincho-OTF-SemiBold"
  "ShipporiMincho-OTF-Bold"
  "ShipporiMincho-OTF-ExtraBold"
)

# 一括変換
for font in "${fonts[@]}"; do
  echo "Converting ${font}.otf..."
  
  # woff2
  pyftsubset ${font}.otf 
    --output-file=${font}.woff2 
    --flavor=woff2 
    --layout-features='*' 
    --no-hinting
  
  # woff
  pyftsubset ${font}.otf 
    --output-file=${font}.woff 
    --flavor=woff 
    --layout-features='*' 
    --no-hinting
done

echo "Conversion complete!"

⚠️ 重要な注意点

`--layout-features='*'` は必須！

# ❌ NG：OpenType機能が削除される
pyftsubset font.otf --output-file=font.woff2 --flavor=woff2

# ✅ OK：すべてのOpenType機能を保持
pyftsubset font.otf --output-file=font.woff2 --flavor=woff2 --layout-features='*'

このオプションがないと、'palt'機能も削除されてしまいます！

CSSファイルの作成

font-face.css（オリジナル版）

/* Regular */
@font-face {
  font-family: 'Shippori Mincho OTF';
  src: url('ShipporiMincho-OTF-Regular.woff2') format('woff2'),
       url('ShipporiMincho-OTF-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Shippori Mincho OTF';
  src: url('ShipporiMincho-OTF-Medium.woff2') format('woff2'),
       url('ShipporiMincho-OTF-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Shippori Mincho OTF';
  src: url('ShipporiMincho-OTF-Bold.woff2') format('woff2'),
       url('ShipporiMincho-OTF-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

font-face.adjusted.css（size-adjust版）

/* Regular */
@font-face {
  font-family: 'Shippori Mincho OTF';
  src: url('ShipporiMincho-OTF-Regular.woff2') format('woff2'),
       url('ShipporiMincho-OTF-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 106%;  /* 英語フォントとのバランス調整する場合 */
}

/* Medium */
@font-face {
  font-family: 'Shippori Mincho OTF';
  src: url('ShipporiMincho-OTF-Medium.woff2') format('woff2'),
       url('ShipporiMincho-OTF-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  size-adjust: 106%;  /* 英語フォントとのバランス調整する場合 */
}

/* Bold */
@font-face {
  font-family: 'Shippori Mincho OTF';
  src: url('ShipporiMincho-OTF-Bold.woff2') format('woff2'),
       url('ShipporiMincho-OTF-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 106%;  /* 英語フォントとのバランス調整する場合 */
}

unpkg.comで配信

簡易手順:

# 1. package.json作成
npm init -y

# 2. package.json編集
{
  "name": "@your-username/font-shippori-mincho-otf",
  "version": "1.0.0",
  "files": [
    "*.woff2",
    "*.woff",
    "font-face.css",
    "font-face.adjusted.css"
  ]
}

# 3. npm公開
npm publish --access public

# 4. unpkg.comで確認
# https://unpkg.com/@your-username/font-shippori-mincho-otf@1.0.0/

📊 最終比較表

項目	TTF版（Google Fonts）	OTF版（自作配信）
入手方法	Google Fonts	fontdasu.com → 変換
変換作業	不要	必要
公開作業	不要	必要（npm/unpkg）
'palt'機能	❌ 効かない	✅ 効く
字詰めの美しさ	△ 普通	◎ 美しい
推奨用途	一般的なサイト	品質重視のサイト