CODE WEBSITE Edit : 2022.05.19 Update : 2023.02.01

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

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

Contents

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

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

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

<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

1	<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

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

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

<style>
.italic {
  font-style: italic;
  display: inline-block;
}
</style>

<style>

.italic {

font-style: italic;

display: inline-block;

}

</style>

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

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。

INDEX

PICK UP

【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.

月額1万円プランもご案内。ホームページ(Webサイト)は保守・運用を行ってどんどん改善していこう!

当社デザインチームが最新のUI/UXトレンドを知るため参考にしている海外サイト

KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。