この記事では、font-familyの説明から指定方法まで解説していきます。

font-familyとは？

font-familyとは、WEBサイトで表示されるフォントを指定することが出来るCSSプロパティです。

代表的なフォントは、ヒラギノ角ゴ/メイリオ/游ゴシックなどがあります。

font-familyの指定方法

基本的なfont-familyの指定方法

基本的なfont-familyの指定方法はこちらです。

今回はヒラギノ角ゴシックを指定しました。

font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;

sans-serifは総称フォントと言い、font-familyで指定したフォントが表示されない場合に、最終的にブラウザが持っているフォントを自動表示してくれるプロパティです。

複数のfont-familyの指定方法

複数フォントを指定する場合はこちら。

今回は「メイリオ」と「ヒラギノ角ゴシック」を指定しました。

font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;

なぜ複数フォントを指定するのかと言いますと、それぞれのブラウザやOS毎に標準で入っているフォントが違うからです。

複数フォントを指定することで、もし対応されていないフォントが指定されていたとしても、代替フォントを指定することが出来るメリットがあります。

複数のfont-familyを指定した場合、左側のフォントからブラウザが認識していきます。

例えば、上記のコードの場合、Windowsだとメイリオのフォントが表示され、Macだとヒラギノ角ゴシックのフォントが表示されます。

フォントを指定する際に「Font-familyメーカー」というツールが便利なので、是非使って見てください。

もし全てのブラウザで表示を統一したい場合は、Webフォントを使うと良いでしょう。

Webフォントとは？

Webフォントとは、Web上で使用することが出来るフォントのことです。

Webフォントを使うことで、全てのブラウザで同じフォントを指定することが出来るメリットがあります。

もしWebフォントを使いたい場合は一番有名な「Googleフォント」を使うと良いでしょう。

Googleフォントの使い方に関しては、Googleフォントとは？使い方を説明！【Webフォント】の記事で過去に解説しているので、もし知りたい方がいたら参照してみてください。

まとめ

以上が、font-familyについてでした。