font-familyの書き方を分かりやすく解説！おすすめ設定をご紹介！

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

font-familyの書き方について解説していきます。

また、おすすめの指定方法をご紹介します！

Webサイトを作成する際にフォントの指定はしておりますでしょうか？

CSSプロパティのfont-familyでフォントを指定する際にどのように指定をすればよいのかで迷ったことはないでしょうか？

デフォルト設定のままで良いんじゃないの？…
どんな指定が適切なのか分からない…
指定方法が分からない…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。

Webサイトを作成する際に、フォントの種類までこだわりたい方も多いかと思います。

Webサイトの環境でどんなフォントが使用できるのか、また、指定方法などを分かりやすく解説していきます！

※CSSについては、こちらの記事「【初心者向け】CSSとは？CSSってどう書くの？」を読んでみてください。

1 font-familyについて
- font-familyとは？
- font-familyの書き方
2 おすすめのfont-familyについて
- おすすめ指定
- 抑えておくべきポイント
3 まとめ

1 font-familyについて

Webサイトを制作する際に、文字の種類を変えたいなと思った方がいるかと思います。

そういった場合に使用するプロパティが「font-family」になります。

実際にfont-familyはどういったプロパティなのか？…どう使用するかなど分かりやすく解説していきます！

font-familyとは？

「font-family」とは、CSSのプロパティであり、Webサイトで表示される文字の種類を指定するために使用されます。

Webサイトのデザインに合わせてフォントの種類を変えたりする機会が多く、フォントの種類によっては文字が読みにくかったりすることを防ぐことができます。

しかし、font-familyで文字の表示を指定したとしても、必ずそのフォントで表示されるとは限りません。

ユーザーが閲覧する端末に表示されるフォントは、ユーザー側の閲覧環境に依存するため、指定したフォントがユーザーのスマートフォンやパソコンに入っていなければ、意図したフォントで表示されず、代替のフォントで表示されます。

なので、基本的にフォントを指定する際は、あらゆる閲覧環境を想定し、できるだけ多くの環境に対応したフォントを指定しておく必要があります。

font-familyの書き方

実際にfont-familyの書き方は、font-familyプロパティを記載し、値の部分に表示させたいフォントの種類を書きます。

基本的に値に記載するフォントの種類は1種類だけではなく、下記のように複数の種類のフォントを指定することが推奨されています。

body {
 font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif  
}

では、どうして複数のフォントを指定するのかと言いますと、Webサイトを見ている環境によって入っているフォントが異なるからです。

代表的な部分で言いますと、WindowsとMacとで同じ会社が作ったものではないので、もちろん搭載されているされているフォントが異なります。

Windowsにしか搭載されていないフォントを指定しても、Macの方には搭載されておりませんので表示されません。

なので、複数のフォントを指定することにより、どの環境下でも表示されるように対応できます。

また、複数指定したフォントのうち、前に書かれたもの（左から順に書かれたもの）が優先的に反映されます。

2 おすすめのfont-familyについて

ここまで、font-familyとは何か？font-familyの書き方についてご紹介しました！

では実際にfont-familyの設定をする際に、数多くあるフォントを選定し、どの環境に適しているのかなどを更に細かく調べて設定しなくてはいけません。

その手間を省くために、おすすめの指定方法や、抑えておくべきポイントをご紹介していきます！

抑えておくべきポイント

1.英語フォントは前に指定

フォントには、英語だけを表示できる「英語フォント」と、英語＋日本語を表示できる「日本語フォント」があります。

日本語フォントを英語フォントの前に指定してしまうと、全てのテキストが日本語フォントで表示されてしまいます。

body {
 font-family: 'Avenir','Helvetica Neue','ヒラギノ角ゴシック','メイリオ',sans-serif  
}

2.最後に総称フォントファミリーを指定

総称フォントファミリーと呼ばれる、「sans-serif」を最後に指定します。

総称フォントファミリーとは、もしWebページを開いた時に指定したフォントが全く入っていなかった場合に「最低限可能なフォントを表示して」と指示が可能です。

ゴシック体系のフォントを使用したいのであれば「sans-serif」を、明朝体系のフォントを使用したいのであれば、「serif」を指定すると良いです。

3 まとめ

今回は、font-familyについて解説してきました！

Webサイトを作成する上で、見栄えよくするためにフォントの種類を設定するかと思います。

指定したフォントが表示されないや、何を設定すればよいのかわからない方もいると思いますので、ぜひこちらの記事を参考におしゃれなフォントを表示させたりなど、更により良いサイトを作成できるようにしていきましょう！