ヒラギノ明朝と游明朝：font-family設定時の注意点とは？

ヒラギノ明朝と游明朝、これらのフォントは日常的に目にすることが多いですよね。多くのデザイナーも愛用しています。
しかし、皆さんはご存知でしたか？これらのフォントは、使用しているデバイスによってはプリインストールされていない場合があるのです。
この記事で、コーディング時に「font-family」を設定する際の注意点や、私がおすすめする方法をお伝えします。

デバイスごとのヒラギノ明朝と游明朝の対応をチェック！（ChatGPT-4調べ）

• MacとiPhone：ヒラギノ明朝◯、游明朝×
• Window：ヒラギノ明朝×、游明朝◯
• Android：ヒラギノ明朝も游明朝も×

これらの情報をもとに、サイト上でヒラギノ明朝と游明朝を正確に表示させるのは難しいことが理解できます。

font-familyで設定方法

明朝体のフォントとして、多くの方はこれらをまとめて指定しています。

1.フォントの優先順位を考慮

font-familyで先にリストアップされたフォントが優先的に表示されます。

• 游明朝を優先させる場合

font-family: YuMincho,
	"Hiragino Mincho ProN",
	serif;
/*【20231120】フォント指定は英語だけでOKになったので、日本語を削除しました*/

• ヒラギノ明朝を優先させる場合

font-family:"Hiragino Mincho ProN",
	YuMincho,
	serif;
/*【20231120】フォント指定は英語だけでOKになったので、日本語を削除しました*/

ポイントは、最後に「serif」を指定することです。

Androidではどちらのフォントも入っていないからです。serifを入れておけば、明朝体として表示されます。

2.Webフォント「Noto Serif JP」の活用

定番のGoogleフォント「Noto Serif JP」を使用すれば、どのブラウザでも一貫した表示が得られます。
Googleフォントなので、無料で使えます！

Webフォントを使用する際は、ページ読み込み速度への影響を考慮し、必要なウェイトのみを読み込むようにしてくださいね。

Google Fonts

Noto Serif Japanese - Google Fonts Noto is a global font collection for writing in all modern and ancient languages. Noto Serif JP is a modulated (“serif”) design for the Japanese language and ot

font-familyの設定例：

font-family:"Noto Serif JP", serif;

3.テキストを画像化

特定のフォントでの表示を確実にしたい場合は、テキストを画像として埋め込む方法もあります。

おわりに

文字の見た目を変えるのは、サイトやブログの雰囲気を大きく左右します。あなたの好みと目的に合わせて、最適な方法を選んでみてくださいね。