Webサイトの印象を大きく左右する「フォント」の設定。
好きなフォントをWebサイトに反映したり、特定のページだけ別のフォントに差し替えたりといったデザインを行うときに役立つのが「font-family」というCSSのプロパティです。
この記事では、初心者の方に向けて分かりやすくfont-familyの概要や使い方をご紹介します。
font-familyの役割
フォントファミリー（font-family）は、Webデザインにおいて、テキストのフォント（文字の書体）を指定するためのCSSプロパティです。このプロパティは、ウェブページやドキュメント内のテキストの外観を制御する際に非常に重要な役割を果たします。
例えば、以下のように「font-family」を使用して特定のフォントファミリーを指定します。
body {
font-family: Arial, Helvetica, sans-serif;
}
この例では、まず「Arial」が使用され、それが利用できない場合は「Helvetica」、さらにそれが利用できない場合は代替のサンセリフフォント（「sans-serif」）が使用されます。
このように、フォントファミリーの指定により、デザインの一貫性や読みやすさを確保することができます。
フォントのタイプを指定できる
「font-family」プロパティを使用すれば特定のフォントを選択・指定できます。このプロパティ内で指定したフォントは、Webページや文書内のテキストに適用され、指定したフォントで表示されるようになります。
後述する「アイコンフォント」のように特殊なフォントも設定できるので、font-familyを使いこなせれば、よりデザインの幅が広がるでしょう。
サイトやページの印象を大きく左右する
フォントはテキストの外観を大きく左右する要素の一つです。フォントの種類や太さ、スタイル、サイズなど多くのスタイリングオプションを指定するためにも使用されます。言い換えれば、サイト全体の印象を形作る重要なプロパティと言えるでしょう。
サイトのコンセプトやターゲットに合わせて最適なフォントを選び、font-familyを活用して適切に設定することが肝心です。
ユーザーのOSごとにフォントを指定できる
フォントファミリーは優先的に使用したいフォントから順に指定する仕様です。ブラウザやデバイスが最初に指定したフォントを表示できない場合、リスト内の次のフォントが自動的に選択されるので、異なる環境でも適切なフォントが表示されて読みやすさが確保されます。
付随して、異なるオペレーティングシステムやブラウザにおいても適切な「font-family」を指定することで、クロスプラットフォームの互換性を確保し、一貫した外観を実現します。
代表的なフォントの種類
ここからは、代表的なフォントの種類について詳しく紹介します。
MSゴシック
MSゴシック（Microsoft Gothic）は日本語のフォントの一つで、主にMicrosoft Windowsオペレーティングシステムに含まれています。ゴシック体と呼ばれる書体の一つで、角ばった文字が特徴的です。
直線的でモダンな外観から使いやすく、最も有名なフォントと言えるでしょう。文字の幅が均一で視認性が高いため、印刷物やデジタルコンテンツなど幅広い用途に適しています。
MS Pゴシック
ほとんどMSゴシックと変わらない外観を持っていますが、MSゴシックがWindows7までのバージョンで使用されていたのに対して、MS PゴシックはWindows 8以降に導入された日本語のゴシック体フォントで、新しいバージョンのWindowsで主に使用されています。
MSゴシックとの大きな違いとしてUnicode文字セットへの対応が向上している点が挙げられ、より多くの特殊文字や国際的な文字に対応しているのがメリットです。
メイリオ
メイリオ（Meiryo）は、マイクロソフトによって開発・提供された日本語向けのフォントです。日本語の「明瞭」から名づけられ、読みやすく分かりやすいフォントとして高い人気を誇ります。
Meiryo UI
Meiryo UIは、メイリオと同様の外観を持ったフォントです。漢字はメイリオと同じデザインですが、ひらがなとカタカナだけは狭い横幅に仕上がっているので、メイリオよりも多くの文字が記載できる特長があります。多くの文字を記載する際はMeiryo UIを選ぶと良いでしょう。
游ゴシック
「游ゴシック」はゴシック体のフォントで、直線的でシンプルな文字形状が特長。日本の「字游工房」が「時代小説が組めるような明朝体」というコンセプトで開発した人気のあるフォントです。
ヒラギノ角ゴシック
デザイン業界で高い評価を集めるヒラギノフォントのゴシック体フォント。Web制作においても、そのスタイリッシュなデザインから多くのデザイナーに重宝されているフォントでもあります。
font-familyの設定方法
ここからは、実際にfont-familyプロパティでフォントを設定できるように設定方法を解説します。
基本のフォントの設定方法
「font-family」プロパティは、CSSでテキストのフォントファミリー（書体の種類）を指定するために使います。ここからはCSSのコードと一緒に解説していきます。
まずは単一のフォントファミリーの指定方法です。
selector {
font-family: "Arial", sans-serif;
}
上記の例では、指定した要素（「selector」）内のテキストに「Arial」というフォントファミリーが適用されます。もし「Arial」が利用できない場合、代替のサンセリフフォント（「sans-serif」）が使用されます。
次に、複数のフォントファミリーの指定方法を見てみましょう。
selector {
font-family: "Helvetica Neue", Arial, sans-serif;
}
ここでは、最初に「Helvetica Neue」を指定し、次に「Arial」を指定しています。もし「Helvetica Neue」が利用できない場合、再び「Arial」が代替として使用され、それも利用できない場合は「sans-serif」が適用されます。
基本的にはこの手順でフォントの設定は完了ですが、font-familyを使えばWebフォントやアイコンフォントといった特殊なフォントも設定できるので、もう少し踏み込んで見てみましょう。
Webフォントの設定方法
Webフォントとは、Web上からダウンロードして使うフォントの総称です。有名なWebフォントプロバイダーにはGoogle Fonts、Adobe Fonts（以前のTypekit）、Font Awesomeなどが挙げられます。好みのフォントが見つかったらぜひ使ってみましょう。
まずは使いたいフォントを選択し、WebフォントのURLを取得します。次にCSSでフォントをインポートしましょう。以下は、Google FontsからWebフォントをインポートするための記述例です。
@import url(‘https://fonts.googleapis.com/css2?family=Font+Name&display=swap‘);
URLの部分には、選択したWebフォントのURLを挿入します。
後は先ほどと同じように、font-familyプロパティでインポートしたWebフォントを指定しましょう。インポートしたWebフォントを使用する要素を選んで、CSSの「font-family」プロパティを設定します。以下は、特定の要素にWebフォントを適用する例です。
selector {
font-family: 'Font Name', sans-serif;
}
Font Nameの部分には、Webフォントの名前が入ります。Webフォントの名前にスペースが含まれている場合はシングルクォーテーションで囲みましょう。また、最後に「sans-serif」などのフォールバックフォントを指定し、Webフォントが読み込めなかった場合に備えて代替フォントの指定も忘れずに行います。
このままではどのHTML要素に適用すればいいのかが分からないので、適用したいHTML要素（<p>や<h1>など）に対して、先ほど設定したCSSのセレクターを使用して、Webフォントを適用しましょう。
これで指定したHTML要素にWebフォントが適用され、Webページ上でそのフォントが適用されます。注意点として、Webフォントを選ぶ際にはライセンスや利用規約に注意を払い、正しい方法での利用を心がけましょう。
アイコンフォントの設定方法
アイコンフォントという特別なフォントもWebフォントと同様の手順で使用できます。まずは使用したいアイコンフォントを見つけましょう。最も有名なアイコンフォントは「Font Awesome」でしょう。選択したアイコンフォントをダウンロードし、CSSファイルとフォントファイルを紐付けます。
アイコンフォントを使用するためには、CSSの「@font-face」ルールを設定しなければなりません。このルールは、フォントファイルへのパスを指定し、フォントをWebページに埋め込む役割を果たします。以下は一般的な「@font-face」ルールの記載例です。
@font-face {
font-family: 'FontAwesome'; /* フォントファミリー名を指定 */
src: url('path-to-font/fontawesome-webfont.woff2') format('woff2'); /* フォントファイルへのパスとフォーマットを指定 */
font-weight: normal;
font-style: normal;
}
次に、アイコンを表示したいHTML要素に適用するためのCSS記述を行います。以下は参考コードです。
.icon {
font-family: 'FontAwesome'; /* 使用するフォントファミリー名を指定 */
}
あとはアイコンを表示するために、HTML要素にアイコンのUnicodeコードまたはクラスを追加しましょう。具体的には、選択したアイコンフォントライブラリのドキュメンテーションに従って追加を進めます。例えばFont Awesomeを使用する場合、以下のように記載しましょう。
<i class="icon"></i>
上記の例では、クラス「icon」が「FontAwesome」フォントファミリーに関連付けられており、Unicodeコード「」がフォントの特定のアイコンを示しています。
このように「font-family」プロパティを使用すれば通常のフォントだけでなく、アイコンフォントのような特別なフォントも表示できます。使いこなせればより効果的なWebデザインが可能になるため、ぜひ活用しましょう。
フォントを使いこなして理想通りのWebサイトを作ろう
この記事で紹介した方法を参考に、お好みのフォントを見つけてWebサイトに導入してみましょう。また、Webフォントやアイコンフォントのような特別なフォントも織り交ぜればさらにオリジナリティのあるWebサイトが制作できるでしょう。
