Web制作

Google Fontsでイタリック（斜体）が正常に表示されない時の対処法

Google FontsのイタリックフォントをPCのChromeで確認したら正常に表示されているのに、iPhoneで見ると斜体になっていない——そんな問題に遭遇したことはないでしょうか。この記事では原因と解決策をまとめます。

問題の症状

Google Fontsのイタリック体をサイトに実装したところ、PCブラウザ（Chrome）では正常に斜体で表示されるにもかかわらず、iPhoneで確認すると斜体が適用されていない状態になっていました。

原因

iOSはCSSでfont-familyを指定するだけでは斜体を認識しません。PCのブラウザはフォントファミリー名からイタリック体を推測して適用してくれる場合がありますが、iOSではより厳密な指定が必要です。

解決策

font-style: italic; を明示的に指定することで解決します。

実装手順

  1. Google Fontsでイタリック体のフォントを選択
    Google Fontsのサイトで使用したいフォントを選び、「Italic」スタイルも選択してリンクを取得します。
  2. linkタグをheadに挿入
    Google Fontsが提供するlinkタグを、テーマのHTMLの<head>内に挿入します。
  3. font-familyを指定
    style.cssで対象要素にfont-familyを指定します。
  4. font-style: italic; も追加して指定（重要）
    font-familyだけでなく、font-style: italic; も必ず追加します。この指定がiOSでの正常表示に必須です。

サンプルCSS

.your-element {
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
}

まとめ

イタリックにしたいならfont-familyだけじゃなくて、font-styleでも指定することが重要です。この二重指定によってPC・iPhone両方で一貫した表示になります。Google Fontsを使ったサイトでイタリックが効かない場合は、まずCSSにfont-style: italic;が書かれているか確認してみてください。

← ブログ一覧へ