CSSの「font-feature-settings」が効かない場合の対処法をご紹介！

font-feature-settingsが効かない

みなさんCSSで文字詰め・カーニングが簡単にできるCSSの「font-feature-settings」を使っていますでしょうか？

font-feature-settingsは文字の間の間隔を詰めたり、逆に広げる時に便利なCSSのプロパティです。font-feature-settingsの使い方については下記の記事を参考にしてみてください。

CSSの「font-feature-settings」で文字詰め・カーニングが簡単にできる！

CSSの「font-feature-settings」使うことで文字詰め・カーニングが行なえます。これまで文字を画像化してカーニングに対応していた方は必見です。font-feature-settingsの使い方と指定する値でどのように文字詰めが行われるかご紹介していきます。

今回ですが、font-feature-settingsを設定したはいいが、ブラウザ上の表示で効かないという場合がの対処法についてご紹介してきます。

font-feature-settingsが効かない要因は対応ブラウザであったり、ベンダープレフィックスであったりと複数考えられますので、順番に見ていって問題を解決していきましょう。

font-feature-settingsが効かない場合の対処法

それではfont-feature-settingsが効かない場合の対処法をご紹介していきます。

ベンダープレフィックスをつけてみる

ベンダープレフィックスがついていないために、font-feature-settingsが効いていない可能性があります。すぐに1行追加して、効くかチェックできると思いますので、真っ先に確認してみましょう。

font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
-moz-font-feature-settings: "palt";

対応ブラウザを確認する

font-feature-settingsですが、すべてのブラウザで対応している訳ではありません。検証したいブラウザがfont-feature-settingsに対応しているかどうかは下記のリンクから確認することが出来ます。

CSS font-feature-settingsのブラウザ対応確認

対応していないところで言いますと、

IE: 6〜9
Firefox: 2〜3.6
Chrome: 4〜15
Safari: 3.1〜3.2
Opera: 10〜12.1（Opera Miniは非対応）
Android Browser: 2.1〜4.3
Blackberry Browser: 7
Opera Mobile: 12〜12.1
IE Mobile: 10、11

となっています。現在主流の大多数のブラウザ・バージョンで対応していますが、ぜひ一度対応ブラウザをチェックしてみましょう。

フォントが対応していない

font-feature-settingsのプロパティが対応していないフォントがあります。

そもそもfont-feature-settingsはOpenTypeフォント（マイクロソフトとアドビシステムズで共同で開発されたフォントの規格）という種類のフォントで効くプロパティとなっています。
つまりOpenTypeフォントでないフォントでは効かない形となります。

以下のフォントではfont-feature-settingsは効きません。

メイリオ
Noto Sans
MS ゴシック
MS 明朝

（メイリオは効きそうなものですが、プロポーショナルメトリクスというフォントが持つ一つの機能を欠いていて効きません）

font-feature-settingsが効かない場合は指定されているフォントの種類が上記になっていないか確認しましょう。もし上記フォントであれば効かないので、別のフォントにすることを検討するのがいいかと思います。