WEBサイトで使えるフォントについてのメモ｜標準フォント・WEBフォントなど

2023/1/28

これまでWEBサービスを開発していて、フォント設定をなんとなくで行ってしまっていました。

そこで今回は改めてフォントについて調べたことを簡単にまとめていきます。

WEBサイトのフォントは大きく分けて「2種類」
- 1）標準フォント
- 2）WEBフォント
標準フォントの指定例
- 「ゴシック体」の場合
- 「明朝体」の場合
おまけ：Next.js + TailwindCSSのフォント指定方法

WEBサイトのフォントは大きく分けて「2種類」

WEBサイトで利用するフォントは「標準フォント」と「WEBフォント」の2つがあります。

（他にも「自分でサーバーにアップしたフォントを使用する」などもありますが、主に使うのはこの2つかなと思い今回は絞りました。）

1）標準フォント

MacやWindowsなどの、OSやメーカー毎に標準搭載されているフォントを読み込んで使用する方法です。

簡単に使用することができて、サイトパフォーマンスはWEBフォントよりも比較的よくなります。一方で、種類が限られているのでサイトのデザイン性や独自性などを出すのが難しくなります。

2）WEBフォント

Google Fontsなど、外部のサーバー上にあるフォントを読み込んで使用する方法です。HTMLやCSSなどで使いたいフォントを読み込むことで使用できるようになります。

いろんな種類のフォントがあり、好きなデザインを選んで使用することができます。ただしファイルが大きいためサイトパフォーマンスが落ちてしまうことがあります。

またWEBサイト上で使用できるかどうかのライセンス確認の必要があります。

標準フォントの指定例

標準フォントで「ゴシック体」と「明朝体」のそれぞれを指定する時の、font-familyの記載例をメモしておきます！（もし記載ミスなどありましたら教えて頂きたいです…）

「ゴシック体」の場合

font-family:
    "Helvetica",                  /* 欧文（macOS） */
    "Helvetica Neue",             /* 欧文（macOS） */
    "Hiragino Kaku Gothic ProN",  /* 和文（macOS） */
    "Hiragino Sans",              /* 和文（macOS） */
    "Arial",                      /* 欧文（Windows） */
    "Yu Gothic",                  /* 和文（Windows） */
    "Meiryo",                     /* 和文（Windows） */
    "Roboto",                     /* 欧文（Android） */
    "Noto Sans CJK",              /* 和文（Android） */
    sans-serif;                   /* 総称: ゴシック */

「明朝体」の場合

font-family:
    "Times New Roman",            /* 欧文（macOS/Windows） */
    "YuMincho",                   /* 和文（macOS） */
    "Hiragino Mincho ProN",       /* 和文（macOS） */
    "Yu Mincho",                  /* 和文（Windows） */
    "MS PMincho",                 /* 和文（Windows） */
    serif;                        /* 総称: 明朝体 */