先日Google Fontsを使ってイタリックの書体を表示しようとしたのですが、なぜかPC(Chrome)の画面では正しく表示されているのにiPhoneで確認すると正しくイタリックで表示されてなくて困ったので、その対処法を紹介します。
Google Fontsの使い方などは↓のページにとても詳しく載っています。
![](https://spade3.com/wp-content/uploads/cocoon-resources/blog-card-cache/7eaa190e1a72607a596da0e786c7c0a8.png)
【2019年版】Google Fontsの使い方:初心者向けに解説!
最も有名なWebフォント「Google Fonts」の使い方と導入方法を、初心者の方でも分かるように解説します。
まずは普通にGoogle Fontsを実装します
当サイトでも使用しているCocoonテーマを例に手順を追って説明します。
Google Fontsなどの外部スクリプトを使用する場合はtmp-userにあるhead-insert.phpに追記します。
![head-insert.phpの場所](https://spade3.com/wp-content/uploads/2018/12/fb59843c9b8b4de59a52654ba09c682f.jpg)
このファイルの一番下の
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
より下にタグを追記します。
Google Fontsでイタリック(斜体)を選択します
![](https://spade3.com/wp-content/uploads/cocoon-resources/blog-card-cache/66a4fdbfed6478feccaf2fe37cbbef65.png)
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
今回はイタリック(斜体)を選択します。
![Google Fontsのイタリックを選択](https://spade3.com/wp-content/uploads/2018/12/38742ae46a6276bc9905a89b4aa20ffc-640x436.jpg)
すると以下のようなタグを挿入することになります。
![Google Fontsのイタリックを選択2](https://spade3.com/wp-content/uploads/2018/12/f174afad1370b3316f64ba13d1cef3cb-640x472.jpg)
head-insert.phpに指定のタグを追記
head-insert.phpに追記します。
![head-insert.phpに追記](https://spade3.com/wp-content/uploads/2018/12/84ea882457ea8d46d1a6edfe6425374b.jpg)
style.cssにタグを追記
あとはstyle.cssにフォントを変えたいタグに追記します。
![style.cssの追記](https://spade3.com/wp-content/uploads/2018/12/88b11f48d58ed29ae3a1513f746ce9e7-640x126.jpg)
正しく表示されるか確認します
![Google Fontsの設定(PC)](https://spade3.com/wp-content/uploads/2018/12/b239393f2fb90bdbe47a1ec89c1e6a91.jpg)
これはPC(Chrome)の画面です。正しく表示されているのがわかります。
しかしiPhoneで確認してみると、、、
![Google Fontsの設定(iPhone](https://spade3.com/wp-content/uploads/2018/12/IMG_3652-640x1138.jpg)
正しく表示されていません。
iPhoneだとイタリック(斜体)にならない原因は?
なぜPCで正しく表示できて、iPhoneでは正しく表示できないのか詳しくはわかりませんが、おそらく書体に含まれる情報の扱いが違うんだと思います。
「イタリック(斜体)にしたいならfont familyだけじゃなくて、font styleでも指定してね!」
ということかと。
iPhoneでもイタリック(斜体)で表示する方法
なのでstyle.cssにfont styleを追記してやります。
font-style: italic;
すると正しくイタリック(斜体)で表示できます。
![イタリック(斜体)になってる](https://spade3.com/wp-content/uploads/2018/12/IMG_3653-640x1138.jpg)
コメント