macOS Catalinaでヒラギノ角ゴを表示させる為のfont-familyの設定とは？

そろそろ、macOS Catalina対応をしないといけない案件も増えていくのではないのでしょうか？

Catalina以前のMAC OS時にコーディングしたWebサイトで、ヒラギノ角ゴがメイリオで表示されてしますケースがネット・SNS上で報告されはじめています。

MAC OS Catalinaでヒラギノ角ゴを表示させる為のfont-familyの設定とは？

解決方法

コーディング時に上記のように指定します。macOS Catalinaで、ヒラギノを表示するためには、過去のMac OSとは別に、ヒラギノを2種類記述する必要があります。念のためローマ字「Hiragino Kaku Gothic Pro」でも指定します。

MAC OS Catalinaで游ゴシック体を優先的に表示させて、ヒラギノ角ゴを表示させる為のfont-familyの設定とは？

次に、デザインによっては「游ゴシック体」を優先的に表示させたい場合、Macに「游ゴシック体」が搭載されていない場合に「ヒラギノ角ゴシック」を表示させるための指定方法です。

解決方法

上記のように先に「游ゴシック体」を指定してから、最後に「ヒラギノ角ゴ」を指定します。

とても簡単ですね。2020年以降コーディングするWeb制作の仕事はMac OS Catalinaに対応することが確実に求められていきます。Webデザインの基本のデバイスフォントの指定はとても重要な要素の１つです。Mac OS Catalina にも対応するために、知らない方はぜひトライしてみてください。

まとめ

デバイスフォントの指定はコーディング時には基本的な部分になりますが、Webデザイナーさんから指定が入りにくい部分でもありますね。優先順位とか、そもそもデバイスフォントの指定ルールを理解していないWebデザイナーさんもいます。

ここはコーダーさんが気をきかして、しっかり指定してあげましょう。もしども書体が優先順位が高いかわからない場合にはWebデザイナーさんにヒアリングするのが一番の解決方法です。