Google フォントとiOS

Google fontsで見つけた Kanit というフォンとのイタリック体が、なかなか格好いいので、ポートフォリオのナビゲーションと見出しに使ってみた。

ところが、サーバーにアップロードしてチェックしたところ、iPhone7ではKanitが反映されていない。「スマートフォンにはGoogle Fontsは使えないのか？？　そんな話聞いた事ないぞ」と半信半疑で検索するが、同様の問題で苦しんだ人はいないのか、それらしい情報は何も引っかからず…。

そして、AndroidのスマホではKanitがきちんと表示され、iPadではchromeでもsafariでもfirefoxでも、Kanitが反映されずに単調なsans-serifでしか表示されていない事に気がついた。

ということは、iOS絡みの問題か？

たどり着いたteratailの記事に助けられ、

font-style: italic;

の一行を追記すると、iPadでもiPhoneでも、全ブラウザで正常に表示された。

よくわからないが、googleフォントでイタリック体を使う時は、iOS対策としてfont-styleも追記しないといけないようです。今後の研究課題がまた一つ。