font-family

フォントファミリー（テキストとフォント）

意味テキストのフォント

font-familyとは？

font-familyプロパティはフォントを指定するために使います。一部のフォントが利用できない場合に備えて、フォントファミリーには複数のフォントを指定することが一般的です。

font-familyの具体的な使い方

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

<style>
    body {
        font-family: Helvetica, Arial, sans-serif;
    }
</style>

<body>
    このテキストはHelveticaまたはArialフォントです。
</body>

ページ全体のテキストに対して、まず'Helvetica'フォントを適用しようとします。もし'Helvetica'が利用できない場合は'Arial'を試み、それも利用できない場合はシステムのデフォルトのサンセリフフォントを使用します。

カスタムフォントを使用する例

<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('path/to/custom-font.woff2') format('woff2');
  }

  body {
    font-family: 'CustomFont', sans-serif;
  }
</style>

カスタムフォントをウェブページに適用する方法です。@font-faceルールを使用してカスタムフォントを定義し、それをbody要素に適用しています。

font-familyに関するよくある質問

Q. font-familyの順序は重要？

A. はい、重要です。ブラウザは左から順にフォントを適用しようとします。最初のフォントが利用できない場合、次のフォントを試みます。そのため、最も優先したいフォントを最初に、汎用的なフォントを最後に指定するのが一般的です。

Q. serif と sans-serif の違いは？

A. serifは文字の端に飾りがあるフォント（明朝体など）、sans-serifは飾りのないフォント（ゴシック体など）を指します。font-familyの最後にこれらを指定することで、指定したフォントが全て利用できない場合のフォールバックとして機能します。

Q. スペースのあるフォント名の指定は？

A. スペースを含むフォント名は引用符で囲む必要があります。例えば、'Times New Roman' のように指定します。これにより、CSSパーサーがフォント名を正しく解釈できます。

font-familyが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのfont-familyやfont-kerning、color、text-shadow、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。