游ゴシック体、游明朝体をサイトで使う。CSSでフォントを指定する。
游書体がWindowsとMacにバンドルされたので、サイトのフォントを游ゴシック体にするのも良いかなと思い試してみた。 游書体 [Wikipedia] に書かれているが、WindowsとMacで表記が異なる。
Windows（日本語 / アルファベット）「体」の有無、スペースの有無が異なる。 そのため、WindowsとMacで游ゴシック体を表示するにはCSSでフォントを2パターン書く必要がある。
font-family: "Yu Gothic", YuGothic, sans-serif;
表記を統一して欲しい気もするが、WindowsとMacで別々に指定できると都合が良いこともある。 Windowsでは游ゴシックはやや薄い（線が細い）印象で見にくいので、例えば font-weight を Medium（NormalとBoldの間）にすると少し見やすくなる。 font-weight を変更すると他のフォントにも影響するので以下のように書く。
font-family: "Yu Gothic Medium", YuGothic, sans-serif;
Windowsの游ゴシックはMedium、Macは普通の游ゴシックになる。 ただ、この書き方はChromeやEdgeでは反映されるが、IEやFirefoxでは反映されず sans-serif が適用される。
font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
このように書くと、WindowsのChromeとEdgeは「Yu Gothic Medium」、WindowsのIEとFirefoxは「Yu Gothic」、Macは「YuGothic」になるが、良い書き方ではないかもしれない。 游ゴシックがバンドルされているパソコンは游ゴシック、バンドルされていないものはメイリオ、これらに漏れたものは sans-serif で何かしら表示されるのがシンプルで良い。
font-family: "Yu Gothic", YuGothic, Meiryo, sans-serif;
現状 iOS はこれらのフォントがないので ヒラギノ [Wikipedia] が表示される。 Android はモトヤか Noto Sans。 そもそも今はスマホからのアクセスが多いのでフォントはどうでも良いような気がしなくもない。
Windows以外はフォントを指定しなくてもそれなりに良さげなフォントで表示される。 結局いつもWindowsのせいで悩まされる。 ちなみに暑苦しいというか主張が強い印象のメイリオは、いくつかのニュースサイトではフォントの色を#333（黒に近いグレー）にし、少し薄く表示して見やすくしている。
サイトのフォントとしてはゴシック体ばかり扱われるが、游明朝体がなかなか綺麗で明朝体のサイトを作りたくなった。
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
Windowsは游明朝のみ指定し、游明朝がない場合はＭＳ Ｐ明朝になる。 Macは游明朝かヒラギノなど、iOSはヒラギノで、Androidは明朝体がない。 きちんと明朝体のサイトを作るには現状Webフォントを使うしかない。 iOS は HiraMinProN-W3 という表記もあるが、Hiragino Mincho ProN でもヒラギノ明朝 ProN W3になる。
うちのサイトの訪問者が使っているブラウザは、スマホを使う人が多いせいもありChromeとSafariが大半で、IEとEdgeがそこそこ。 私はFirefoxも使っているが、昔の勢いはなく、使っている人はほとんどいない。 Operaに至ってはなかったことにしても良い。 それ以外のブラウザは存在しない、というのは言い過ぎかもしれないが、あくまでうちのサイトではそんな印象。