【iPhone】作成したWebアプリをブラウザで確認するとフォントが明朝体になる問題

最近自分で作成したWebアプリを、iPhoneから確認した際に

フォントが明朝体で表示されて2日悩んだので、解決した方法を残しておきます。

ほとんど方には当てはまらない事象かもしれませんが、誰かの参考になれば幸いです。

iPhoneのブラウザフォントが明朝体から変わらない

結論から先に書いてしまうと、iPhone本体の言語設定を日本語に戻すことで解決しました。

以下、この事象が起こった環境と行ってみた解決法をご紹介します。

基本的なWebアプリと同様、cssでフォントを指定していました。

指定していたのは最近お気に入りの’遊ゴシック‘や’メイリオ‘フォント。

（この時にはiOSのフォントで上記フォントが未対応な事実は知る由もない）

開発中は基本PCのブラウザで確認していたため、フォントの違いに気が付きませんでした。

作成したWebアプリをHerokuに上げて、実機（iPhone）で状況を確認した際に、

なぜかフォントが明朝体になっていることを確認しました。

ゴシック体じゃないとしっくりこないと思いましたが、他の処理部分の修正を先に行っていた為フォントはしばらく放置でした。

あらかた修正が完了し、フォントの修正を行おうとしましたがうまくいかず。

調べてみるとそもそもiOSで自分が指定していたフォントは対応しておらず、

sans-serifという総称フォントと呼ばれるフォントを指定すれば、自動的にOSが持っているゴシックフォントを当てはめてくれることが判明。

（ちなみにserifだと明朝体フォントになるらしい）

これで一安心と思い、ソースを下記のように修正、コミット後にiPhoneで確認すると、、

body {
    font-family: "遊ゴシック",
      Meiryo,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      sans-serif;
  }

変わらず明朝体でした。

色々原因を検索してみても、解決できそうなものは見つからず。

その時ふと、自分のiPhoneの設定言語が英語になっていたことに気づきました。

確認用のブラウザとして使っていたChromeは個別設定で日本語にしていたため、

ダメ元でしたが言語を日本語に直してみることに。

するとようやくゴシック体のフォントに変更されました、、！

ちなみに他のページを検索した際は、特に明朝体になることもありませんでしたし、

もう一度言語を英語に直しても明朝体には戻りませんでした。

今回、私の環境は

というカオスな状況だったので、発生した問題だと思います。

もう一度同じ事象を発生させようと思っても再現出来なかった為、

偶然生まれてしまった不具合かもしれません。

もし同じような状況の方がいれば、ぜひ本体の言語設定を確認してみてください。