LoginSignup
9
10

More than 5 years have passed since last update.

IE10以上でWebフォントが表示されない時はms-font-feature-settingsを確認

Last updated at Posted at 2015-10-01

IE10から搭載された -ms-font-feature-settings は、指定したフォントがサポートするスタイルセットが使えるようになるプロパティですが、これによって一部のWebフォントが表示されない時があります。

下記のHTMLはIE10以上では表示されません(IE11で確認)。

<!doctype html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
        p.font1{
            font-family: 'Montserrat', sans-serif;
            -ms-font-feature-settings: "kern", "liga", "pnum";
        }
    </style>
</head>
<body>
    <p class="font1">Web font</p>
</body>

-ms-font-feature-settings: "kern", "liga", "pnum"; という組み合わせは Bourbon Bittersでデフォルトで設定されているので、自分はこれでハマりました。

対応方法

IEで表示されないWebフォントがある時は、そのフォントだけ -ms-font-feature-settings: "normal"; を指定すると表示されます。

p.font1{
    font-family: 'Montserrat', sans-serif;
    -ms-font-feature-settings: "normal";
}

フォントによって違うので他の組み合わせも可能ですが、とりあえず表示させたいなら normalで確認するのが良いと思います。

参考サイト

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
10