CSSでfont-familyを使用してフォントを指定する方法

（font-family）はフォントを指定するプロパティです。フォントを変更することで、よりデザインが豊かになります。

しかし、指定したフォントをユーザーも所持しているとは限りません。ユーザーが所持していないフォントの場合は、指定されたフォントは表示されず、デフォルトのフォントが表示されることになります。

今回は、（font-family）を使用する際の注意点や実際の記述の方法を紹介します。

フォントの指定をする

フォントの指定の仕方には、フォントの名前で指定する方法と、フォントの種類や系統を示すキーワードで指定する方法があります。

フォントの名前を使って指定

フォントの名前でフォントを指定することができます。フォント名の中に、スペースがある場合は、” ”でフォント名を囲みます。

キーワードを使って指定

どんな系統のフォントか、といった指定の仕方をします。そうすることで、名前で指定したフォントを利用できない環境のユーザーに、指定したフォントに近い雰囲気のフォントを表示してくれます。

複数のフォントを指定する

先ほども記述した様に、指定したフォントが、ユーザの利用できないフォントである場合は、デフォルトのフォントになってしまいます。対策として、フォントを指定する際は複数のフォントを指定しておくことで、ユーザーが閲覧した際に自分のデザインに合うフォントが表示される確率を上げて起きましょう。

複数のフォントは、カンマを使い、区切って指定します。

記述方法

実際の記述の仕方を見てみましょう。

このように、フォントを指定したい要素、font-family、指定したいフォントを記述します。今回は、MS  ゴシックとゴシック系統のフォントを指定してある状態です。

英語はwebフォント等を利用すると大変便利です。