MENU
アラフォー女のWEB制作鍛錬ブログ

【無料】もう悩まない！フォント別font-familyの指定方法

CSS

WEBフォントではなく、「システムフォント」を使う場合は、どんなパソコンやスマホでも綺麗に見えるようにfont-familyの指定には注意が必要です。
なぜなら、Windows、Mac、パソコン、スマホとOSによってシステムフォントが違うからです。

今回は、有名なフォント別に、崩れが少ないfont-familyの指定方法をご紹介します。

目次

ゴシック体（サンセリフ体）

ヒラギノ角ゴシック

ヒラギノ角ゴシックは、Pro・ProN・Stdと種類が細かいです。
しかし、システムフォントを使う場合、そこまで細かく指定できないです。
なので、よく使われるヒラギノ角ゴシックをfont-familyに指定します。
（BIZ UDPGothicとメイリオはよくあるフォントなので、保険で入れます。下で解説します。）

font-family: 
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	"BIZ UDPGothic",
	Meiryo,
	sans-serif;

代表的な種類を設定する

Hiragino Kaku Gothic ProNは、ヒラギノ書体で伝統的なフォントなので、これを指定します。

ヒラギノ書体を使います。ヒラギノ書体にもいくつか種類がありますが、伝統的なHiragino Kaku Gothic ProNを優先し、Hiragino Sansはフォールバックに指定します。

  • Hiragino Sansが必要な理由：
    • ヒラギノ角ゴ Proとヒラギノ角ゴ ProNはmacOS Catalina（2019年）以降はバンドルされていないので、CSSでHiragino Kaku Gothic ProNを指定しても、macOS Firefoxではフォントがあたらない。そのため、Hiragino Sansのフォールバックが必要となる。
  • Hiragino Kaku Gothic ProNが必要な理由：
    • macOSとiOSに搭載されているHiragino Sansのウェイトの種類が異なるので、扱いが容易なHiragino Kaku Gothic ProNを優先にしている。SafariはHiragino Kaku Gothic ProNを指定するとヒラギノ角ゴ ProNではなく、Hiragino Sansの該当ウェイトにマッピングされているようだ。
ICS MEDIA｜「2022年に最適なfont-familyの書き方」｜https://ics.media/entry/200317/｜2023年11月20日

font-familyを指定する時、従来は英語・日本語を同時に設定していましたが、今は英語だけで良さそうですね。

ちなみに今の時代、フォントの英語名と日本語名の両方を指定する必要ありません。英語名だけでOKです。

body {
  /* NG例 */
  font-family:
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    sans-serif;
}
ICS MEDIA｜「2022年に最適なfont-familyの書き方」｜https://ics.media/entry/200317/｜2023年11月20日

Windows用の定番フォントを設定する

Windows用にBIZ UDPGothicとメイリオ（Meiryo）を入れます。
メイリオは定番ですよね。
BIZ UDPGothicはWindows10から搭載されたフォントだそうなので、メイリオより癖が少ないBIZ UDPGothicを先に設定するのが良さそうです。
（引用元サイト様で、詳しい比較画像があります）

無難にメイリオ（Meiryo）を使います。もしくは、Windows 10 October 2018 Updateで搭載されたBIZ UDPゴシック（BIZ UDPGothic）もいいでしょう。BIZ UDPGothicを使う場合は、冒頭のCSSは次の通りとなります。Meiryoよりも優先指定します。

body {
  /* 「BIZ UDPゴシック」をWindowsで指定 */
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}

BIZ UDPGothicは標準搭載から3年ほど経過したものの、知名度は高くなく、評価が定まっていないので、やや冒険的かもしれません。モダンな癖の強いメイリオよりは、BIZ UDPGothicは個性が少なく扱いやすい印象です。

ICS MEDIA｜「2022年に最適なfont-familyの書き方」｜https://ics.media/entry/200317/｜2023年11月20日

san-serifはどんな環境でも入っているので、最後に必ず入れましょう！

Helvetica（ヘルベチカ）

先に結論を述べるとこれになります。

font-family: 'Helvetica neue',
		Helvetica,
		Arial,
		sans-serif;

定番フォントのHelvetica Neueを設定する

定番のフォントとよく言われるのがHelveticaではなくHelvetica Neueの方になります。
保険として、1番目にHelvetica Neue、2番目にHelveticaを指定します。

欧文フォントには定番のHelvetica Neueを使います。San Francisco登場前はHelvetica NeueがApple系OSの既定フォントだった時期があります（iOS 7〜8）。

ICS MEDIA｜「2022年に最適なfont-familyの書き方」｜https://ics.media/entry/200317/｜2023年11月20日

実は Windowsにはインストールされていない

英語ゴシックでは有名なフォントなので、どんなパソコンやスマホでも実装されていると思われがちです。
実は、WindowsにはHelveticaは入っていないそうです…。

代表的な欧文フォントの１つである Helvetica (ヘルベチカ) は、macOS に標準で組み込まれているフォントです。一方 Windows 10 では、無料で使うことができません。

NJ-CLUCKER｜「【無料】Windows 10 で Helvetica の代わりになるフォントをインストールする方法」｜https://nj-clucker.com/instead-of-helvetica-on-windows10/｜2023年11月20日

よく代替フォントとしてArialが用いられますが、「R」と「C」が違いが出るようです。
（引用元サイト様で、詳しい比較画像があります）
それ以外は問題なさそうなので、Windows用にArialを指定しましょう。

ヘルベチカに似ているとたまに話題にあがる「Arial」。ヘルベチカの特徴ある形の「Ｒ」や「Ｃ」を比べてみると全然似ていないことがわかります。

ソクラテツチップス｜「Helvetica（ヘルベチカフォント）をwindows10で使う方法【無料】」｜https://socratetsu.jp/study/helvetica.html｜2023年11月20日

ゴシック体のお決まり事として、どこでも使えるsan-serifを最後に入れましょう。

明朝体（セリフ体）

游明朝

font-family: YuMincho,
	"Hiragino Mincho ProN",
	serif;

最後にserifフォントを設定する

serifはどんな環境でも表示されるセリフ体フォントです。
Androidでは、ヒラギノ明朝はないので、最後にserifを設定しておけば、絶対明朝体で表示されます。

ヒラギノ明朝

font-family:"Hiragino Mincho ProN",
	YuMincho,
	serif;

Windows、Macそれぞれに表示されるようにする

明朝体もゴシック体同様、OSによってシステムフォントが違います。
似通っている「ヒラギノ明朝」と「游明朝」を優先させたい方を先に設定します。

  • MacとiPhone：ヒラギノ明朝◯、游明朝×
  • Window：ヒラギノ明朝×、游明朝◯
  • Android：ヒラギノ明朝も游明朝も×
WEBもがき道場｜「ヒラギノ明朝と游明朝：font-family設定時の注意点とは？」｜https://lifescrewdesign.com/blog/css/font-family-mincho/｜2023年11月20日

最後にserifフォントを設定する

serifはどんな環境でも表示されるセリフ体フォントです。
Androidでは、游明朝もないので、最後にserifを設定しておけば、絶対明朝体で表示されます。

Times, Times New Roman

font-family: 'Times', 'Times New Roman', serif;

表示させたい方を先に書く

（Times New Romanは、）多くのパーソナルコンピュータにインストールされている。

Weblio辞書｜「Times New Romanとは – わかりやすく解説」｜https://www.weblio.jp/content/Times+New+Roman｜2024年4月3日

上の引用元や、検索結果から考えると、TimesよりTimes New Roman の方が多く使用されているようです。
TimesとTimes New Roman は文字幅同じで、併用しても大きくデザインが崩れることはないので、保険としてどちらもfont-familyに書いておくのが良いと思います。
（ちなみに、私のMacBookには、Times New Romanの方だけ入っていました。）

以下のように、ごく一部の文字に違いがあるので、
こだわりのある人は、表示させたいフォントを先に書きましょう。

Times New RomanとTimesの主な違いは、
SのセリフがTimesでは斜めであること、
Timesの5にはセリフが付いていること、
Timesのイタリックzはカールしている点など。

Weblio辞書｜「Times New Romanとは – わかりやすく解説」｜https://www.weblio.jp/content/Times+New+Roman｜2024年4月3日

最後にserifフォントを設定する

何度も書きますが、serifはどんな環境でも表示されるセリフ体フォントです。
私のAndroidでは、TimesもTimes New Romanもないので、最後にserifを設定しておけば、絶対セリフ体で表示されます。

Times New Romanとserifフォントを比べてみました。
比べると違いますが、どちらも、文字として読みやすいですよね。
UIの観点からも、font-familyの最後にはserifをいれるようにしましょう。

Times New Roman
Times New Roman
serif
serif

左：Times New Romanフォント使用、　右：serifフォント使用

【余談】font-weightを細かく設定したい時は、ウェブフォントを使う

システムフォントは、2段階（RegularとBold）の設定が大半になります。
ヒラギノフォントは種類によっては、9段階くらいあります。
しかし、システムフォントで使えるか試したところ、2段階（RegularとBold）しか使えない場合がほとんどです。

もしfont-weight: 200;、font-weight: 400;のように、「フォントの太さを細かく設定したい」場合は、ウェブフォントの使用を検討しましょう。

たとえば、「ヒラギノ角ゴシック」なら、Google Fontsの「Noto Sans Japanese」が近いです。
モリサワフォントをホームページで使用する場合は課金する必要がありますが、Google Fontsは無料で使用できます。

とはいえ、ウェブフォントは読み込めば読み込むほど重くなるので、
ホームページの読み込みスピードを優先するか、見た目を優先するかはお客様によって判断してください！

CSS
CSS 開発者向け
WEBもがき道場

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
目次