CSS font-familyの使い方 フォント種類・字体の変更方法

CSS

【CSS font-familyの使い方】フォント種類・字体の変更方法

2022年7月3日

今回は、フォントの種類・字体を変更することができるCSSプロパティ「font-family」の使い方を解説していきます。

PCやモバイル端末には、游ゴシック、游明朝、ヒラギノゴシックなど、いろいろなフォントがインストール・用意されており、CSSで表示される文字フォントを指定することができます。

システムフォントを使用するデメリット
 

 

 

font-familyはフォントの種類を指定できるCSSプロパティ

font-familyはフォントの種類を変更する事ができるCSSプロパティです。

以下のように 「font-family: フォント名;」と記述することで、選択した要素のフォントを変更することが可能です。

フォントの種類をメイリオに変更している例

最後に書かれている「sans-serif」の意味については、後ほど「抑えておきたいポイント」箇所で解説します。

ただし、指定したフォントが変更されるのはあくまでも、ユーザーの使用しているデバイスにそのフォントが入っている場合で、入っていない場合は代替フォントで表示されます。

システムフォントを使用するデメリット

その為、font-familyを指定する際は、各環境で最適な表示がされるよう「複数のフォントを指定しておく」必要があるなど、いくつか抑えておきたいポイントがあります。

以下では、font-familyを指定する際に抑えておきたいポイントについて解説していきます。

(補足):Webフォントを使用すると、ユーザー環境に関係なくフォント表示を統一できる

なお、Webフォントと呼ばれる仕組みを使うと、ユーザーの環境に関係なく、フォントの表示を統一することが可能です。

本記事ではWebフォントについて詳しくは解説しませんが、以下の記事でWebフォントとシステムフォントの違いについて触れていますので、興味がある方はこちらも参考にしてみてください。

(関連記事)Webフォントとシステムフォントの違いと特徴・メリットデメリット

システムフォントとWebフォントの違いについてをまとめた図

 

 

font-familyを指定する際に抑えておきたいポイント

それではfont-familyを指定する際に抑えておきたいポイント、書き方を紹介していきます。

通常PCやスマホなど端末により利用できるフォントが異なるため、ユーザー環境毎に最適な表示がされるように複数のフォントを指定します。

下記にいくつか覚えておきたいポイントをご紹介します。

■font-familyを指定する際に覚えておきたいポイント

  • 1. 複数のフォントを指定する
  • 2. 総称フォントファミリー名を最後に記述する
  • 3. 間に半角スペースを含むフォント名は、クオーテーションマークを付ける
  • 補足. 英語フォントを先に記述する

 

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

まず1つ目のポイントは、複数のフォントを指定するという点です。

前述したようにfont-familyプロパティを使用して、「font-family: Aフォント;」のように指定すると、そのフォントがインストールされているデバイスでは正しく表示されていますが、そうでない場合は代替フォントで表示されてしまいます。

システムフォントを使用するデメリット

これだと代替フォントによってはサイトデザインが意図しないデザインになってしまう可能性があるので、以下のようにフォント間をコンマ(,)で区切って、複数のフォントを指定してあげるのが一般的です。

Windowsユーザーの場合のfont-familyの適用例

こうしてあげることで、左側から順番にフォントが参照されていき、ユーザーのデバイスに搭載されているフォントがあればそれが適用されるようになります。

 

2. 総称フォントファミリー名を最後に記述する

2つ目のポイントは、総称フォントファミリー名を最後に記述するという点です。

総称フォントとは、1番最後に指定してある「sans-serif」や「serif」という記述のことで、これを指定しておくと、仮に全ての指定したフォントがインストールされていない場合でも、「フォントの系統(明朝体なのかゴシック体なのか)」を指定しておくことができます。

総称フォントについて解説している図

sans-serif ゴシック体フォント
serif 明朝体フォント
monospace 等幅フォント
cursive 筆記体フォント
fantasy 装飾系フォント

上ではいくつかの例をあげていますが、一般的には「sans-serif(ゴシック体)」や「serif(明朝体)」を指定することが多いので、こちらの2つは覚えておくようにしましょう。

(補足):総称フォントで表示されるフォントはブラウザ設定に依存する

なお補足ですが、総称フォントで表示されるフォントは各ブラウザで設定されているフォントに依存します。

■(参考)Google Chromeで設定されているデフォルトフォント設定

Google Chromeのデフォルトフォント

上はGoogle Chromeのデザイン設定画面ですが、仮に上のような設定になっている場合は「serif = ヒラギノ明朝 ProN」「Sans Serif = ヒラギノ角ゴシック」がそれぞれ表示されるようになります。

 

3. 間に半角スペースを含むフォント名は、クオーテーションマークを付ける

3つ目のポイントは、間に半角スペースを含むフォント名は、クオーテーションマーク(「‘」あるいは「”」)を付けるという点です。

Times New Romanフォントを使用している例

なお、こちらに関してはあくまでも「recommended(推奨)」のようで、なくても指定は通ります。

To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:

引用元:https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family

また、フォント名の中に半角スペースが入っていないものでも、フォント名にクオーテーションマークを付けていて問題はありません。

クオーテーションマークを付けておくとフォント指定の区切りが分かりやすくなるので、半角スペースを含む含まずにかかわらず全部のフォントにつけているケースも多いです。

 

補足. 英語フォントを先に記述する

補足になりますが、ウェブサイトで英文字と日本語で別のフォントを使用したい場合は、先に英語フォントを記述してあげることで、英文字と日本語で別のフォントを使用することができます。

アルファベットには英語フォントを使用する方法

英語文字には英語フォントを表示させている例

 

 

font-familyを指定する場所

次にfont-familyを指定する場所ですが、基本的にはウェブページ全体のフォントを指定したい場合がほとんどだと思うので、「bodyタグ」に指定しておくと良いでしょう。

こうすることでpタグ、ulタグに関わらず全てのフォントを指定したフォントで表示させる事が可能です。

 

 

各OSのバージョン毎に対応しているフォントの確認方法

なおフォントを指定する際、各OSのバージョン毎にどんなフォントがインストールされているのか分からず、どのフォントを指定すれば良いのか迷われる方も多いはずです。

そういった方は、個人メディアとして月間最高250万PV/月を記録した「サルワカ」さんが運営している「Font-familyメーカー」を参考にすると良いでしょう。
 

Font-familyメーカー

こちらのサービスを使用することで簡単にWindows、Mac、iPhoneの標準フォントを確認でき、ドラッグ&ドロップをすることで、コピペで使えるfont-familyを作成できます。

 

 

まとめ・font-familyの使い方

まとめです。今回は、フォントの種類・字体を変更することができるCSSプロパティ「font-family」の使い方を解説しました。

PCやモバイル端末には、游ゴシック、游明朝、ヒラギノゴシックなど、いろいろなフォントがインストール・用意されており、CSSで表示される文字フォントを指定することができます。

■font-familyを指定する際に抑えておきたいポイント

  • 1. 複数のフォントを指定する
  • 2. 間に半角スペースを含むフォント名は、クオーテーションマークを付ける
  • 3. 総称フォントファミリー名を最後に記述する
  • 補足. 英語フォントを先に記述する

また、Webフォントと呼ばれる仕組みを使うと、ユーザーの環境に関係なく、フォントの表示を統一することが可能です。興味がある方は下記も参考にしてみてください。

(関連記事)Webフォントとシステムフォントの違いと特徴・メリットデメリット

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS