TOC
Chromeでのみフォントが正しく読まれない問題
先日にブログを作り直し、現在はHugoを使ってGitHub Pages上でホスティングしている。 前までブログにははてなブログを利用していたのだが、広告が鬱陶しいと感じたため自分でホスティングし直すことにした。
そんなわけでHugoのデザインテンプレートを利用したりして現在のブログがあるわけだけど、いつからかフォントが妙な動作をしていた。 というのも、SafariやiPhoneで見てみると正しく日本語のフォントが見えているが、なぜかChromeでのみフォントが中華フォントになっていた。
コードを読み直してみてもカスタムCSSが適切に配置してある。 前まではChromeでもちゃんと動いていた気がするが、なにが起きていたのだろう。
-apple-system
とBlinkMacSystemFont
使用していたデザインテンプレートのCSSではfont-familyに-apple-system
と書いてあった。
これをググってみると、どうやらSafariでは-apple-system
というのをfont-familyに指定しておけば英字書体にAppley用の英字フォント(San Francisco)が適用されるらしい。
ChromeでApple用英字フォントを使うにはBlinkMacSystemFont
を指定する必要があるらしく、どうやらこれはWebkitから派生したレンダリングエンジン用フォントらしい。
これを適切に動作させるには-apple-system
と同時にBlinkMacSystemFont
とも書いておく必要があったとのこと。
結局どうしたか
特段フォントに対してこだわりはないので全て以下の通りに設定した。
font-family: Helvetica,"Sawarabi Gothic",Meiryo,"メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",YuGothic,"游ゴシック",Arial,sans-serif;
これでブラウザ依存の無いようにフォントが表示されるようになった。