2020.5.14

Webフォントとシステムフォントの設定

Webサイトを構築する際に判断に悩むfont-familyの設定。ここでは、Webフォントやシステムフォントを使用した設定方法について掲載しておきます。

目次

  • Webフォントとシステムフォントの違い
  • Webフォントの設定
  • よく使うシステムフォントの設定
  • 参考リンク

Webフォントとシステムフォントの違い

WebフォントはGoogle FontsなどのようにWebからダウンロードして使用するフォントのことで、システムフォントはOS標準でサポートされているフォントのことです。

システムフォントの場合、OSによっていサポートされているフォントが違うため、CSSのfont-familyの設定で複数のフォントを指定する必要がありますが、Webフォントを導入することによって、統一されたフォントでページを表示することができます。

ただし、Webフォントはフォントファイルをダウンロードする必要があるため、ファイルサイズが大きいとページの表示に時間がかかるというデメリットがあります。

Webフォントの設定

以下、font-familyにGoogle Fontsを設定する場合の方法です。

Google Fontsで表示したいフォントがあったら、HTMLの<head>タグ内に以下のような<link>タグを埋め込みます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap">

埋め込んだらfont-familyの設定。

font-family: 'Noto Sans JP',sans-serif;

同じフォントとはいえOSやブラウザによっては表示が微妙になるので、実際に使用する場合は、システムフォントと組み合わせて使います。

よく使うシステムフォントの設定

Webフォントを使わない場合、よく使っているシステムフォントの設定は以下の通り。

font-family: Roboto,-apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"Yu Gothic Medium",sans-serif;

「Roboto」や「-apple-system」などはAndroidやiOS関連のフォント。

フォント関連の記事を確認すると、複数のOSが対象の場合、上記のような設定が一般的なようです。

参考リンク

CSS】関連記事