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;
これでブラウザ依存の無いようにフォントが表示されるようになった。