2019tl;drうちではこんなfont-familyまわりの指定をしている。2019年時点でベストの設定。BlinkMacSystemFontmacOSとiOS用の欧文フォント。後述のRobotoを使えば良さそうではあるけども、WebPが使えないiOS環境の人の読み込み負荷を少しでも下げるために指定している。RobotomacOSとiOS以外のための欧文フォント。Fontsで読み込んでいる。Androidだとこれもリモートからは読まないはず。UIとかを指定しても良いんだけどいまいちしっくりこないので。YuGothicmacOS用の和文。Medium”Windows用の和文。Windowsの場合Chromeで游ゴシックを普通に指定すると文字がかすれるという厄介な問題があり、それを回避するためにウェイト込みで指定している。@font-faceを使う方法が紹介されていることが多いが、2018年のどこかで使えなくなっているため注意が必要。macOSに入っているやつとは微妙に名前が違うおかげで「Macだと今度は太すぎる」といったことがない。これをそのまま太字にするとBoldではなくMediumを機械的に太くしたものが適用され、綺麗ではない。Gothic"を指定することになる。sans-serif他の環境でデフォルトのフォントを出すための設定。7での閲覧が多ければ、これの前にMeiryoを指定してもいい。7なんて使っている人はMSゴシックでも困らなさそうということで、うちでは指定していない。iOSや古いmacOSはこれでヒラギノ角ゴが出てくるので、特にヒラギノを指定する必要はない。1809から搭載されたフォント。Windowsの和文用で、これはChromeでもかすれない。これはいわゆるUDフォントで、字形にちょっと癖があるためサイトによっては雰囲気が壊れるかもしれない。MeiryoWindowsの標準フォント。Windowsのレンダラに最適化されておりChromeでもかすれない。10で実現しようとするとこれを指定することになる。UIに近く、游ゴシックの亜種なのにChromeでもかすれない。MEDIAここを読んでもらうのが早い。游ゴシックにはカーニング用の情報が入っており、このプロパティを指定するといい感じにカーニングしてくれる。游ゴシックはともかくヒラギノは結構ガッチリ詰まるので、iOSで見ている人はちょっと変な感じに見えるかもしれない。letter-spacingで開ければ良いんだけど、そうすると游ゴシックでは字間が開きすぎるので難しい。