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

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

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

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

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

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

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

埋め込んだら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が対象の場合、上記のような設定が一般的なようです。