[CSS] font-familyプロパティでフォントを指定しよう!

1.font-familyとは?

font-familyプロパティを利用することでフォントを指定できます。

指定したフォントがWebサイト閲覧者の環境にない場合、ブラウザで設定された標準フォントが表示されます。

値の指定方法は以下の通りです。

{ font-family: ファミリー名, 一般フォント名; }

ファミリー名

カンマで区切って複数のフォントを指定でき、Webサイト閲覧者の環境に用意された最初のフォントで表示されます。

一般フォント名

ファミリー名の値で指定したフォントがWebサイト閲覧者の環境にない場合、ブラウザーのシステムフォントから以下のキーワードに対応するフォントで表示されます。

2.font-familyの使い方

それではfont-familyの使い方をみていきましょう。

body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }

上記の例では、まずHelvetica Neueを指定し、その後フォールバックとして具体的なフォント名を指定しています。

最後にsans-serifを指定することでHelvetica Neueに対応せず、さらに具体的に指定されたフォントがインストールされていない環境ではゴシック系のシステムフォントが使用されます。