Webデザインで日本語のタイポグラフィを美しく見せるために、CSSの font-feature-settings: "palt";（プロポーショナルメトリクスによる文字詰め）は非常に便利です。

しかし、Google Fontsから読み込んだ日本語フォントに対して、この「palt」を指定しても全く効かない（余白が詰まらない）という壁にぶつかったことはありませんか？

この記事では、Google Fontsで文字詰めが適用できない理由と、それを解決して確実にお気に入りのフォント（今回は例として「しっぽり明朝B1」を使用）に palt を効かせる手順を分かりやすく解説します。

なぜGoogle Fontsのリンクでは「palt」が適用できないのか？

結論から言うと、Google FontsがWeb表示を高速化する過程で、フォントデータから「文字詰めの情報（OpenType機能）」を削ぎ落としてしまっているからです。

日本語フォントは、ひらがな・カタカナ・漢字など数千文字以上が含まれるため、データサイズが数MBと非常に重くなります。そこでGoogle Fontsは「ダイナミックサブセット」という技術を使い、必要な文字だけを細かく分割して読み込ませることで軽量化を図っています。
しかし、この分割処理の副作用として、文字同士のカーニング情報である palt や vpal が失われてしまうのです。

解決策は「セルフホスティング（自前での読み込み）」

これを解決するには、Google Fontsの標準API（<link href="...">）を使わず、フォントデータそのものを自分のサーバー（WordPressなど）にアップロードして読み込ませる「セルフホスティング」を行う必要があります。
オリジナルのデータを使用すれば、OpenType機能が保持されているため、美しい文字詰めが実現します。

必要なもの

  • 使いたいフォントデータ（TTFまたはOTF形式。今回は「しっぽり明朝B1」を例にします）
  • ターミナル（Mac）またはコマンドプロンプト（Windows）
  • Python環境（フォントをWeb用の軽量な「WOFF2」形式に変換するために使います）
  • サーバーへのファイルアップロード手段（FTPソフトやWordPressのファイルマネージャーなど）

実装の手順

ステップ1：フォントデータのダウンロード

Google Fontsのサイト、またはGitHubなどの公式リポジトリから、使いたいフォントのデータ（.ttfファイル等）をPCにダウンロードし、作業用のフォルダ（例：font-folder）にまとめておきます。

ステップ2：変換ツールの準備（ターミナル操作）

TTFファイルはそのままWebで使うには重すぎるため、Webに最適な高圧縮フォーマット .woff2 に変換します。
Macの場合は「ターミナル」（Windowsの場合はコマンドプロンプト等）を開き、以下のコマンドを1行ずつ実行して準備を進めます。

# 1. フォントを保存したフォルダへ移動する（自身の環境に合わせてパスを変更してください）
cd ~/Downloads/font-folder

# 2. 仮想環境を作成する（システム環境を汚さないため）
python3 -m venv env

# 3. 仮想環境を有効化する（左側に (env) と表示されればOK）
source env/bin/activate

# 4. フォント変換ツール（fonttools）と圧縮ライブラリをインストール
pip install fonttools brotli

ステップ3：TTFからWOFF2への変換 ＆ サブセット化

ツールの準備ができたら、フォントを変換します。単純に圧縮するだけでなく、文字数を絞ってさらに軽量化する「サブセット化」の手法も併せて紹介します。

パターンA：そのままWOFF2に変換（全文字保持）

まずはシンプルに圧縮だけを行う場合です。

fonttools ttLib.woff2 compress ShipporiMinchoB1-Regular.ttf
⚠️ 注意ポイント： 日本語フォントはデータが巨大なため、エンコード処理で数分間（3〜5分程度）画面がフリーズしたように止まることがあります。エラーではないので、処理が終わって次の入力行が表示されるまで気長に待ちましょう。

パターンB：常用漢字などに絞ってサブセット化（さらに軽量化）

表示スピードを極限まで速めたい場合、実際にサイトで使う文字（常用漢字・ひらがな・カタカナ・記号など）だけを抽出して書き出すのがおすすめです。

1. 抽出したい文字をまとめたテキストファイル subset.txt を作成し、フォルダに保存します（常用漢字一覧などをWebからコピーして作成すると簡単です）。
2. ターミナルで以下のコマンドを実行します。

pyftsubset ShipporiMinchoB1-Regular.ttf \
  --text-file=subset.txt \
  --layout-features="*" \
  --flavor=woff2 \
  --output-file=ShipporiMinchoB1-Regular-subset.woff2
⚠️ ここが最大の注意ポイント： --layout-features="*" を必ず指定してください。サブセット化ツールは、デフォルトでは「palt」などの文字詰め情報を削除してしまいます。このオプションを入れることで、軽量化しつつ美しい文字詰め機能を維持できます。

ステップ4：WordPressへのアップロードとCSSの記述

処理が終わると、フォルダ内に WOFF2ファイル（例：ShipporiMinchoB1-Regular.woff2）が生成されます。これをWordPressのテーマ内（例：/wp-content/themes/your-theme/fonts/）にFTPなどでアップロードします。
その後、テーマの style.css に以下を追記します。

/* 1. フォントを自前で読み込む */
@font-face {
  font-family: 'Shippori Mincho B1 Local'; /* 任意の名前 */
  src: url('./fonts/ShipporiMinchoB1-Regular.woff2') format('woff2'); /* サブセット化した場合はそのファイル名 */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. 要素に適用し、paltを有効化 */
.text-palt {
  font-family: 'Shippori Mincho B1 Local', serif;
  font-feature-settings: "palt" 1;
  font-kerning: normal; /* より自然な字詰めのために推奨 */
}

確認方法（本当に効いているかチェック！）

実装が終わったら、実際のブラウザで確認してみましょう。

  1. ブラウザ（Google Chromeなど）で対象のページを開きます。
  2. palt を適用したテキストの上で右クリックし、「検証（デベロッパーツール）」を開きます。
  3. 右側のスタイルパネルにある「Computed（計算済み）」タブを開きます。
  4. 一覧の中に font-feature-settings: "palt" 1; が存在しており、打ち消し線などが引かれていないことを確認します。

「、」や「。」、括弧などの約物（やくもの）周辺の不自然な隙間がスッと詰まり、美しいプロポーショナルな文字組みになっていれば大成功です！

よくある質問（Q&A）

WOFF2に変換せず、ダウンロードしたTTFをそのままWebで使っても良いですか？
おすすめしません。
日本語のTTFファイルは数MB〜十数MBと非常に容量が大きく、そのまま読み込ませるとWebサイトの表示速度が著しく低下します。SEOの観点からも、Webに最適化されファイルサイズを大幅に削減できる「WOFF2」形式への変換は必須と言えます。
「palt」ではなく「vpal」も同じ手順で適用できますか？
はい、適用可能です。
縦書きで文字詰めを行いたい場合は、CSSの指定を font-feature-settings: "vpal" 1; とし、writing-mode: vertical-rl; と併用してください。セルフホスティングしたフォントであれば問題なく機能します。
文字全体のカーニングは不要で、括弧や句読点の隙間だけを詰めたいのですが？
「YakuHanJP」などの約物専用Webフォントを併用する方法が簡単です。
「文字詰めはしたいけれど、セルフホスティングや変換の手間はかけたくない」という場合、約物（記号類）だけを半角にする Webフォント（YakuHanJP）をGoogle Fontsの前に読み込ませる手法がよく使われます。用途に合わせて使い分けてみてください。