游ゴシックや游明朝を CSS で指定する時の注意

2017-01-31CSS

游ゴシック・游明朝とは

游ゴシックおよび游明朝とは、字游工房さんで販売されているフォントです。
ディスプレイで見ても、印刷してもとても綺麗なフォントで、私もよく使います。
(メイリオは、ディスプレイでの映りを重視しすぎて、印刷するとなんか微妙です)
このフォントは2013年ごろより急激に知名度が上がりました。その切っ掛けは　Windows 及び Mac に標準でバンドルされたことです。
Windws であれば Windows 8.1 以降に、Mac であれば OSX Marverics 以降に標準で入っています。

Windows にも Mac にも入っている綺麗なフォントというのは、Web サイトを作成する人にとって素晴らしいものです。
とりあえず游ゴシックや游明朝を指定しておけば、最近のOSであれば同じように表示されます。
(現実には、Mac を使っている人はヒラギノに慣れておりそちらの方が見やすいという人が多く、ヒラギノと游書体を併用しているサイトが多いのが現状です)

とても良いフォントの游書体なのですが、Windows および Mac どちらにも表示されるように CSS で游書体を指定する時に注意すべき点があります。
たまに、初心者向けのブログ記事で、どうみても動かない指定を堂々と掲載していたりしますので、注意してください。

指定方法

例として、以下のような規則でフォントを指定してみます

• Windows
  • 游ゴシックを使う
  • それがなければメイリオを使う
• OSX(macOS)
  • 游ゴシックを使う
  • それがなければヒラギノ角ゴシック Pro を使う

これを以下のように書くと動きません

この指定を行ったサイトを OSX で見ると、游ゴシックが入っている環境でも、ヒラギノが表示されてしまいます。

原因は Windows と OSX では游ゴシックの名前が違うことです。

Windows で游ゴシックの情報を見てみると、フォント名は「游ゴシック」です。

一方、OSX のシステムから 游ゴシックのフォント情報を見てみると、名前に「游ゴシック体」と書いてあります。

この名前で指定すると、OSX でも游ゴシックが表示されます。

社内で公開した当記事に対して先輩から指摘があり、上記だと Safari で動かないことが分かりました。
(本当にありがとうございました！)

Safari は英字名でないとフォントを認識してくれないそうです。
以下の内容で、本当に OSX でも 游ゴシックが表示されます。

おまけ

ちなみにですが、Windowsの游ゴシックは太さを指定しないととても細く、高解像度のディスプレイでないと目に悪いです。
游ゴシック標準で指定することをオススメします。

まとめ

• 游ゴシックと游明朝は Windows 8.1 および OSX Marverics(10.9) 以降 で使えるフォント
• 中身は同じであるが、システムによって名前が異なるので注意する
  • Windows は「游ゴシック/游明朝」、OSXは「游ゴシック体/游明朝体」で指定する必要がある
  • 英語表記ならば Windows は「Yu Gothic/Yu Mincho」、OSXは「YuGothic/YuMincho」

例えば、游ゴシックを Windows と Mac どちらにも指定する場合は以下のように書く