webフォントを指定していて、font-style:italicが効かないときの対処法

コーディングで英語用のwebフォントを利用し、見出しにfont-style:italicをつけたかったのですが、適用されないことがありました。
確認することは2つです。

1.italic用のwebフォントを取得しているか

例えば、Amiriというフォントの場合、「Regular 400 Italic」というstyleがあるので、そのスタイルを有効化します。
そうすると、読み込むlinkにAmiri:italという記述が追記されます。

生成されたlinkは下記のようになりました。「Amiri:ital」がありますね。

この状態で、cssでfont-style:italicを指定し、適用されればそれでOKです。
しかし私の場合は、このままでは適用されませんでした。

2.display: inline-block;をいれる

cssでitalicにしたい箇所をinline-blockまたはblock要素にします。

 
 
 
以上で、font-style:italicが適用されるようになりました。

WORKS制作実績