この記事では、CSSのfont-familyプロパティの概要とその使い方について解説します。
Webサイトやアプリケーションのデザインにおいて、テキストのフォントは非常に重要です。
フォントを適切に選定することで、サイトの印象を大きく変えることができ、可読性を上げる効果も期待できます。
font-familyプロパティとは？
font-familyプロパティは、要素のフォント（文字のスタイル）を指定するためのプロパティです。
このプロパティを使うことで、テキストがどのフォントで表示されるかを決定できます。
例えば、「游ゴシック」や「メイリオ」など、ブラウザにインストールされているフォントや、Webフォントとして提供されているフォントを指定することができます。
使用例
p {
font-family: "游ゴシック", "Yu Gothic", sans-serif;
}上記の例では、<p> 要素に「游ゴシック」フォントが適用されます。
もし「游ゴシック」が利用できない場合、次に指定されている「Yu Gothic」フォントが使用され、それも利用できない場合は sans-serif フォントが使用されます。
font-family プロパティの基本構文
font-family プロパティの基本構文は次の通りです。
font-family: フォント名1, フォント名2, 汎用ファミリー;複数のフォントをカンマで区切って指定します。
最初のフォントが使用できない場合、次のフォントが使用されるというフォールバック（代替措置）機能があります。
これは、ユーザーの環境によってインストールされているフォントが異なるためです。
フォント名の指定方法
フォント名の指定方法にはいくつかのルールがあります。 以下に詳細を解説します。
単一の単語
フォント名が単一の単語である場合は、特別な処理をする必要はありません。
例えば、「メイリオ」や「ゴシック」などです。
font-family: Meiryo, Gothic, sans-serif;複数の単語
フォント名が複数の単語からなる場合は、名前を引用符で囲む必要があります。
例えば、「游明朝」や「ＭＳ Ｐゴシック」などです。
font-family: "游明朝", "ＭＳ Ｐゴシック", serif;スペースや特殊文字を含む場合
フォント名にスペースや特殊文字が含まれている場合も、引用符で囲みます。
例えば、「ヒラギノ丸ゴ Pro」などです。
font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", sans-serif;汎用ファミリー（Generic Family）
font-family プロパティでは、特定のフォントを指定するだけでなく、汎用ファミリーと呼ばれる分類名を指定することもできます。
これにより、ブラウザは利用可能なフォントの中から最適なものを選んで表示します。
主な汎用ファミリーは次の通りです。
serif
セリフ体のフォント。
文字に装飾があり、伝統的な印象を与えます。
例：「ヒラギノ明朝 Pro」や「游明朝」。
font-family: serif;sans-serif
サンセリフ体のフォント。
装飾がなく、モダンな印象を与えます。
例：「游ゴシック」や「メイリオ」。
font-family: sans-serif;フォールバック戦略
font-family プロパティでは、ユーザーの環境に依存するため、必ずしも指定したフォントが利用できるとは限りません。
そこで、複数のフォントを指定することで利用できないフォントがあった場合の代替を指定します。
例えば、次のように指定します。
body {
font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}ここでは、「ヒラギノ角ゴ Pro W3」が利用できない場合、「メイリオ」が使用され、それも利用できない場合は sans-serif が使用されます。
Webフォントの活用
最近ではWebフォントを利用することで、ユーザーの環境に依存しないフォントを使用することが一般的になっています。
Google Fontsなどのサービスを利用することで、簡単にWebフォントを導入できます。
以下はGoogle Fontsを利用した例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webフォントの例</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
}
</style>
</head>
<body>
<p>これはWebフォントを使用した例です。</p>
</body>
</html>この例では、Google Fontsから「Noto Sans JP」フォントをインポートし、body に対して適用しています。
Googleフォントの使用方法については他の記事で解説しますが、上記htmlのheadタグにある下記のlinkタグでGoogle Fontsの「Noto Sans JP」というフォントを読み込んで（インポートして）います。
そうすることで読み込んだフォントが使用できるようになります。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">フォントの指定で気をつけるべきポイント
ユーザー環境への配慮
ユーザーの環境によっては、指定したフォントがインストールされていない場合があります。
そのため、フォールバックフォントを適切に指定し、代替のフォントが使用されてもデザインが崩れないようにする必要があります。
フォントのライセンス
使用するフォントのライセンスにも注意が必要です。
商用利用が制限されているフォントや、使用に費用がかかるフォントもあります。
Webフォントサービスを利用する場合は、ライセンス条件を確認しましょう。
パフォーマンス
Webフォントを多く使用すると、ページの読み込み速度が低下する可能性があります。
パフォーマンスを考慮し、必要なフォントだけを選択して軽量なデザインを心がけましょう。
まとめ
この記事では、テキストのフォントを指定するfont-familyプロパティについて解説しました。
適切にフォントを指定することで、ユーザーにとって読みやすく視覚的に魅力的なページを作成することができます。
フォントを指定する際は、使用するフォントがユーザーも同じフォントが使える環境なのかも配慮する必要がありますので、その辺りも踏まえて選定することが大切です。
コメント