• HOME > 
  • CSS > 
  • CSSのfont-familyの使い方【文字のフォントを変更...

CSSのfont-familyの使い方【文字のフォントを変更!】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

font-familyプロパティとは?

font-familyは、文字のフォントを変更するためのプロパティです。

普段私たちが目にしている文字はすべて何かしらのフォントの種類に分類されます。フォントが変わるだけで、同じ文字、同じ内容でも読み手に与える印象や読みやすさが大きく変わるので、フォント選びはとても重要です。

フォントの違いの例

特にWeb制作においては、OSによる対応フォントの違いや日本語フォントの有無、Webフォントの導入など、font-familyプロパティを理解して指定しなければ、意図したフォントで表示することができなくなります。

また、CSSのプロパティを使って文字の太さ(font-weight)や文字間隔(font-feature-settings)を調整する場合にも、フォントによって対応しているものとそうでないものがありますので、目的に合わせてフォントを選ぶ必要があります。

このページでは、font-familyの基本的な使い方からWebフォントのひとつであるGoogleFontsの利用方法までを説明します。

font-familyの記述の仕方

font-familyプロパティは以下のように記述して指定します。

font-familyの書き方

実際の記述例は以下の通りです。

HTML

<p class="sample1">あ亜aA1</p>
<p class="sample2">あ亜aA1</p>

CSS

.sample1{
    font-family: 'メイリオ','ヒラギノ角ゴシック',sans-serif;
}
.sample2{
    font-family: 'MS 明朝','ヒラギノ明朝 ProN',serif;
}

プレビュー

あ亜aA1
あ亜aA1

記述の際には次のようなルールや注意点があります。

  • 代替フォントを記述しておく
  • フォント名は「'」(シングルクォーテーション)や「"」(ダブルクォーテーション)で囲む
  • フォント名とフォント総称名を記述する

代替フォントを記述しておく

Webサイトを訪れるユーザーの閲覧環境は様々です。OSによっては対応していないフォントや日本語に対応していないものも存在するため、font-familyを指定する際には本来使いたいフォントだけでなく、それが表示できなかった時のための代替フォントを必ず記述しておかなくてはいけません。複数のフォントはカンマで区切って記述します。記載したフォント名は左に書いたものが優先度が高くなっており、順番に判別されていき利用できるものが採用されます。

font-familyの優先順位

先程の例では、「メイリオ」はWindowsにしか対応していないため、MacやiPhone・iPadでは「ヒラギノ角ゴ」を表示するようにしています。

フォント名とフォント総称名を記述する

フォント名とはフォントの種類ひとつひとつに名付けられた固有の名前のことで、フォント総称とはそれらを大まかに分類してひとくくりにしたようなものです。

フォント総称は、万が一記述したフォント名がすべて適用できないというような状況に備えて一番最後にすべりどめとして書いておきます。総称フォントは、OS等によってその中のいずれかのフォントが自動的に適用されます。

日本語サイトで主に使用する総称フォントは「serif」「sans-serif」です。明朝体にしたいときは「serif」、ゴシック体にしたいときは「sans-serif」を末尾に書いておくようにするのが基本です。

font-familyのフォント総称の記述
フォント総称名字体表示例
serif明朝体あ亜aA1!?
sans-serifゴシック体あ亜aA1!?
monospace等幅あ亜aA1!?
cursive筆記体あ亜aA1!?
fantasy装飾体あ亜aA1!?

フォント名は「'」(シングルクォーテーション)や「"」(ダブルクォーテーション)で囲む

font-familyでは、フォント名であることがわかるように「'」(シングルクォーテーション)や「"」(ダブルクォーテーション)を使って囲まなければいけません。

ただし、最後に記載するフォント総称名には何も付けないので間違えないようにしましょう。

font-familyのクォーテーション

日本語サイト向けフォント

日本語サイトで良く使われているフォントをいくつかご紹介します。

これらのフォントは、後述するWebフォントを読みこませずに表示することができます。

ゴシック体でおすすめのフォント

フォント名表示例
メイリオあ亜aA1!?
Meiryo UIあ亜aA1!?
游ゴシックあ亜aA1!?
Yu Gothic UIあ亜aA1!?
MS ゴシックあ亜aA1!?
MS Pゴシックあ亜aA1!?

明朝体でおすすめのフォント

フォント名表示例
游明朝あ亜aA1!?
MS 明朝あ亜aA1!?
MS P明朝あ亜aA1!?

Google Fonts(グーグル・フォント)の使い方

Google Fontsは、Googleが提供しているWebフォントサービスです。

豊富なフォントの数々を無料で利用することができる上に、商用利用も許可されています。

Google Fontsを活用できれば、フォント選びの幅を大きく広げる事ができ、自身のサイトのイメージに合ったフォントを見つけることができるはずです。

Webフォントとは?

従来Webサイトのフォント表示は、OSによってインストールされているフォントの情報が異なるためユーザーの閲覧環境が違うと別のフォントが表示されてしまうという課題を抱えていました。

その課題の解決策が、Webフォントです。

Webフォントは、ネット上の外部サーバーにあるフォントのデータを読み込むという方法を取ることで、閲覧環境に左右されることなく制作者が選んだフォントを表示することを実現しています。

Google Fontsの中から使いたいフォントを選ぶ

ここからは、Google Fontsを使ってフォントを変更する手順を解説していきます。

ここでご紹介する手順や掲載画像などは執筆時点のものです。Google Fontsの仕様変更があれば手順等も変わる場合がありますので、あらかじめご了承ください。

まずは、Google Fontsのサイトを開いて使いたいフォントを探しましょう。

Google Fonts(https://fonts.google.com/)はこちら Google Fontsのサイト

サイトを開いたら、上部にある「language」のプルダウンの中から「Japanase」を選んで日本語フォントを絞り込みます。

Google Fontsのlanguage

続いて隣にある「Categories」の中から、「明朝体(serif)」か「ゴシック体(sans-serif)」かを選んで更に絞り込みましょう。

Google FontsのCategories

絞り込まれた中から、使いたいフォントを選んでクリックします。ここでは「Noto Sans Japanese」を選びます。

フォントを選ぶ

「Noto Sans Japanese」のページが開きます。

「Noto Sans Japanese」のページ

Google Fontsを自身のサイトに読み込む

使いたいフォントのページを開いたら、右上の「View Selected Families」ボタンをクリックします。

「View Selected Families」ボタンをクリック

右側に「Selected Family」ウィンドウが表示されます。(ページを開いたらはじめから表示されている場合もあります)

「Selected Family」ウィンドウ

フォント名の下に「Thin100」~「Black900」までが表示されていますが、これはフォントの太さのデータを表すものです。

フォントの太さはCSSのfont-weightで調整できるのですが、任意の太さに変更するためにはWebフォントを読み込むときに、このデータを持たせる必要があります。

もし不要な太さがあれば右側のマイナスボタンで除外することができます。

太さによる見え方の違いは、ページの中ほどにある「Style」という所に掲載されています。

フォントの太さによる見え方の違い

なお、フォントによって用意されている太さの種類は異なります。用意されていなければ、font-weightで指定しても変更することはできません。

次に「Selected Family」ウィンドウの「Use on the web」に記載されているコードをコピーします。コードの右下のボタンをクリックすればコピー可能です。

記載されているコードをコピー

「link」と「@import」という2種類の読み込み方を選べるようになっていますが、@importで読み込む方法は廃止されるため非推奨とされています。linkタグを使って読み込むようにしましょう。

コピーしたコードを自身のサイトの<head></head>の中に貼りつけます。

<head></head>は、WordPressであればテーマファイルのheader.phpに記述されています。(※WordPressのテーマファイルを編集する際は、バックアップをとった上で、自己責任で作業してください。記述を間違えるなどするとサイトが見れなくなるなどの不具合を起こす恐れがあります)

header.php

<html class="no-js" <?php language_attributes(); ?>>
<head>
    -省略-
    <link rel="preconnect" href="https://fonts.googleapis.com">←Google Fonts
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>←Google Fonts
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">←Google Fonts
</head>
以上で選んだフォントをサイトで利用できるようになりました。続いて、フォントを適用させたいセレクターに対してCSSを記述します。

font-familyでGoogle Fontsを指定する

Webフォントも読み込みが完了していれば、通常と同じようにfont-familyでフォント名を指定するだけでOKです。

先程の「Use on the web」の下には、CSSのコードのも用意されているのでこれをコピーした方がスペルミスを防げるので便利です。

記載されているCSSコードをコピー

CSS

sample1{
    font-family: 'Noto Sans JP', sans-serif;
}

以上でGoogle Fontsのフォントの導入は完了です。

プレビュー

あ亜aA1

font-familyが効かないときは?

font-familyを指定したのに思い通りに反映されない場合は、次のような点を確認してみましょう。

  • コードに記述ミスはないかどうか?
  • 同じセレクターで重複して指定していないか?
  • セレクターの優先順位は正しいかどうか?

コードに記述ミスはないかどうか?

CSSはスペルミスやコロン・セミコロンを付け忘れているだけで反映されなくなりますので今一度確認してみてください。font-familyの箇所以外が間違っていても同様ですので遡ってチェックしましょう。

同じセレクターで重複して指定していないか?

CSSは同じセレクターの場合、後から記述したものが優先されます。同じセレクターでfont-familyを指定していないか確認してみてください。

セレクターの優先順位は正しいか?

同じ要素でもCSSのセレクターには優先順位があり、基本としてはタグよりもクラス、クラスよりもIDに指定した値が優先されます。以前に別のセレクターを使ってfont-familyを指定していないかなど確認してみてください。

リンク先のサムネイル
CSSのセレクターの使い方

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】

まとめ

以上が、CSSのfont-familyプロパティの使い方です。

違うフォントにするだけでサイトの印象はガラリと変わります。色々なWebサイトでどのフォントを使っているか研究して、自身のサイトのイメージにマッチしたフォントを選ぶようにしましょう。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。