Webフォントに関する知識

WEBフォントって重いのでは？

日本の通信スピードであれば1書体なら問題ない。

加えて、一度でもフォントがキャッシュされていれば重さは関係なくなる。
自社以外でも他社で同じフォントを見ていれば、自社サイトでは即時表示される。

そのため、なるべくシェアの高いフォントを使う方が、
画像よりもサイズが軽くなる期待値が高い。

使用する際の注意事項

Googleフォントは仕様変更され、
IEではウェブフォントを見ることができない。

理想フォントは「游ゴシック体」

理由はWindows、Mac、iPhoneで利用可能だから。

欠点はWindowsのデフォルトで細字になること

そのためYu Gothic Mediumと記述しなければならなくなる。
しかしそれで万事解決というわけではなく、
その状態でboldを指定すると、やはり滲んでしまう、という問題が発生する。
普通のYu Gothicを太字にした時とは明らかに違う表示になるとのこと。

@font-faceは利用不可

以前は上述の問題対策として@font-face を利用する方法があったが、
Chrome65以降は非対応となった。

理想の設定方法について

游ゴシックを使う際は、
以下の記述順序で並べていく方法が一般的である。

-apple-system

他に影響を及ぼさないApple用の英字フォント。
設定するとSan Franciscoが適用される。

BlinkMacSystemFont

MacでChromeとFirefoxを使用するときは、-apple-systemではなくこちらが利用される。

Yu Gothic

windows用の游ゴシック表記。

YuGothic

Mac用の游ゴシック表記。

Meiryo

Vista, Win7, Win8ように記述。
Win8以降は上述のYu Gothicが使用される。

今後の対策として

Noto Sans JPを利用する、という方法が挙げられていた。
今回調べた中では1記事でしか紹介されていなかったが、
弊社サイトでも同じ対策が取られているので紹介。
2018年流行？font-familyのオススメ設定はこれ！【CSS】

Webフォントを利用することで、
OSの違いにも柔軟に対応することが可能。
以前と比べても表示速度が劇的に向上しているため、
特に違和感を感じることなく利用することができる。

もしWebフォントを使用するのにすら不具合が出るような状況で
ページが見られる時(オフライン、通信制限時)のために、
上記の游ゴシックの設定を施していくのがベストである。

理想と現実

ここまでは、このフォントを使うべき、という話だったが、
実際に使われているフォントはどうなのか。

ブラウザのデフォルトフォント

Safari 11.1 / MacOS 10.13　ヒラギノ角ゴ ProN
Chrome 65.0 / MacOS 10.13　ヒラギノ角ゴ ProN
Firefox 59.0 / MacOS 10.13　ヒラギノ角ゴ ProN
Microsoft Edge 41 / Windows 10　メイリオ
Internet Explorer 11.209 / Windows 10　メイリオ
Chrome 65.0 / Windows 10　メイリオ
Firefox 59.0 / Windows 10　メイリオ

Macではヒラギノ角ゴ ProN、
Windowsではメイリオが利用されている。

有名サイト

ＭＳＮニュース　
font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif;

yahooニュース
font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;

Apple
font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳＰゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;

Google
font-family: Roboto,Arial,Helvetica,sans-serif;

Googleは別として、メイリオ、ヒラギノが上位に来ている。
Windowsユーザーが多いということを考えると、
現実的な側面から、メイリオ、ヒラギノをメインに据える方法が、
まだ主流である、と言えそうだ。

参考：

2017年版個人的ベスト｜CSSフォント指定WIN、MACでキレイに表示（ゴシック、明朝）｜MWORKS
2018年流行？font-familyのオススメ設定はこれ！【CSS】
2018年のfont-family指定 - Qiita
游ゴシックのfont-family指定方法2018年度版！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO
Font−familyのベストな書き方 2018年改定版 | それからデザインスタッフブログ
font-family　2018　あれこれ悩むより、有名サイトを参照するといい。
いまどきのCSS - font-family ゴシック編｜masakihongo｜note
2020年まで使えるfont-familyおすすめゴシック体 - Qiita