catch-img

CSSでフォントを変更する方法を初心者向けに解説。コードサンプルも

使う文字フォントによって、サイトやブログの印象が変わります。この記事では、CSSでフォントを変更する方法を解説します。具体的な書き方も提示しますので、Webサイトでフォントを変更・設定したいときに役立てましょう。

目次[非表示]

  1. 1.CSSでフォントを変更する方法
    1. 1.1.font-familyを使う
    2. 1.2.font-familyの役割とは
  2. 2.font-familyの指定方法
    1. 2.1.フォントの指定方法
    2. 2.2.複数のフォントを指定する方法
    3. 2.3.サイト全体にフォントを指定する方法
  3. 3.知っておくと何かと便利なルール
    1. 3.1.前に書かれたフォントを優先
    2. 3.2.英語フォントが日本語フォントより前に
    3. 3.3.半角スペースが入る場合は「'」を使う
  4. 4.フォントを指定する上での注意点
    1. 4.1.PCにフォントがインストールされていること
    2. 4.2.OSごとにフォントは異なる
    3. 4.3.最後に総称フォントファミリーを記載する
  5. 5. CSSを適切に設定してフォントを調整しよう

CSSでフォントを変更する方法

CSS(Cascading Style Sheets)は、Webサイトのスタイルを決めるための言語で、スタイルシート言語と呼ばれます。文字や画像の大きさや位置・縦並びか横並びかのレイアウトなどを指定することができます。

CSSでフォント(書体)を変更するときには、専用のプロパティを使います。使われるプロパティとその役割を確認しましょう。

font-familyを使う

プロパティは選択した要素のスタイルを設定する方法を表します。フォントを変更する場合、一般的には「font-family」というプロバティが使われます。

Wordで文書を書くときに特定の書体に変えたい場合、フォントタイプをプルダウンから選択するでしょう。この書体の選択を、Webページ上ではCSSのfont-familyを使って行います。

フォントを変えたいHTML要素をセレクタとして記載し、font-familyでフォントを適用する仕組みです。

font-familyの役割とは

font-familyはWeb上のサイトやHTMLメールなどで、特定のフォントを表示させるために用いられます。

ただし実際は、サイトやメールを見る側の環境によって表示されるフォントは変わります。ユーザー環境に適応したフォントを指定しなければ、思った通りのデザインにならないでしょう。

font-familyでを使うときは、一つだけでなくいくつかフォントを指定しておかなければなりません。具体的な方法は「複数のフォントを指定する方法」を参考にしましょう。

■関連記事

  HTMLとCSSをマスターしよう。作成の基礎や学習方法を紹介 | Java・フロントエンド研修のジョブサポート HTMLとCSSは、Webサイトを作成するために開発されたプログラミング言語です。それぞれの書き方や関係性を知ることが、Webサイト作成の学習における第一歩といえるでしょう。作り方の基礎や大まかな流れ、おすすめの学習方法を紹介します Java・フロントエンド研修のジョブサポート

フロントエンド入門5日(HTML・CSS・JavaScript)講座ー株式会社ジョブサポート

font-familyの指定方法

font-familyで書体を指定するには、具体的にどのような記述をすればよいのでしょうか?サンプルコードも提示しながら解説していきます。ルールを押さえて正しく書けるようになりましょう。

フォントの指定方法

CSSでフォントを指定するには、以下のように記述します。「p」の部分は任意のセレクタ(HTML要素)、「MS 明朝」の部分はフォント名(フォントタイプ)に置き換えます。

p {
font-family: "MS 明朝";
}

他のプロパティ同様、プロパティの後にセミコロンを置きその後に値を指定する書き方です。上記ではフォント名にスペースが入っているため、「"」で囲んでいます。

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

一般にfont-familyを使ったフォント設定では、複数指定するのが一般的です。特定のフォントがOSやユーザー側の環境にないため表示できず、代替フォントになってしまう可能性があるためです。

いくつか指定しておくと、最初のものがなくても次を探すといった仕組みになっています。複数指定したいときは、次のように宣言します。

font-family: ‘候補その1’,’候補その2’,’候補その3’,総称フォントファミリー名;

フォント名称の間に「,」を入れ、それぞれのフォント名を「'」または「"」で囲みます。いずれの候補も表示できない場合、「総称ファミリー名」と呼ばれるフォントの中からユーザー環境にあるものが選ばれます。

サイト全体にフォントを指定する方法

Webページで特定の要素だけフォントを変えることは、見やすさの観点からも考えにくいでしょう。ページのすべてに一括設定する方法が手間もかからないため一般的です。

font-familyの指定をWebページやHTMLメール全体に対してまとめて適用する場合、bodyセレクタに対するスタイルとして記述します。コードの書き方は下記の通りです。

body {
font-family: '候補その1','候補その2','候補その3',総称フォントファミリー名;
}

bodyセレクタには他にも、ページの幅など全体に表示したいスタイルが記載されます。

■関連記事

  HTMLで画像を表示する方法解説。imageタグの使い方と注意点 | Java・フロントエンド研修のジョブサポート 画像が適切に配置されているWebページは、テキストのみのページに比べ、格段に見た目が良くなります。HTMLファイルで画像を表示するには、imageタグを使うのが基本です。タグの使用方法や、画像の位置・大きさを変える方法などを解説します。 Java・フロントエンド研修のジョブサポート

オンラインリモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

知っておくと何かと便利なルール

font-familyでフォントを変更・設定するコードを書くにあたって、いくつかの決まりがあります。代表的な決まりを三つ確認しましょう。

前に書かれたフォントを優先

いくつかのフォントを記述したとき、優先的に表示されるのは先に書かれたフォントです。具体例を見ていきます。

font-family: 'Yu Gothic','Yu Gothic Medium','メイリオ','MS ゴシック','游ゴシック Medium',sans-serif;

例えばこのようなコードの場合、最優先で表示されるのは「Yu Gothic」です。「Yu Gothic」が表示できない場合は「Yu Gothic Medium」が、それも表示できなければ「メイリオ」というように移っていきます。

英語フォントが日本語フォントより前に

フォントには、英語だけに使われるものと日本語と英語どちらにも使われるものがあります。font-familyを記述する際には、英語専用の書体を先に記述するようにしましょう。

英語表記のときは優先した英語フォントが、日本語表記の場合には以降に続く日本語のフォントが使われるようになるためです。

font-family: 'Arial','Courier','メイリオ',sans-serif;

上記のコードでは「Arial」は英語フォントのため、英語表記では「Arial」が適用されます。「Arial」と「Courier」はどちらも日本語に使えないので、日本語の文字は「メイリオ」で表記されます。

英語の文字も日本語の文字もすべて統一したいという場合は、一番先頭に日本語のフォントを持ってくれば可能です。

半角スペースが入る場合は「'」を使う

「Yu Gothic Medium」や「MS ゴシック」のように、フォント名のに半角スペースが入るものがあります。

スペースが入っているフォント名は「'」もしくは「"」で囲む必要があります。そのまま記述すると、フォント名として認識できないため注意が必要です。

■関連記事

  HTMLとJavaScriptの基本。役割や呼び出し方を解説。 | Java・フロントエンド研修のジョブサポート Webサイトの構築にはCSSやHTMLを使いますが、アクティブなデザインを構築するにはJavaScriptを覚える必要があります。HTMLでJavaScriptを呼び出す方法、それぞれの言語が担う役割について学びましょう。 Java・フロントエンド研修のジョブサポート

通年開講プロエンジニアコース(Java研修1~3ヶ月)ー株式会社ジョブサポート

フォントを指定する上での注意点

フォントをfont-familyで指定する上で注意すべき点も押さえておくと安心です。これまでのおさらいもかねて、チェックポイントを見てみましょう。

PCにフォントがインストールされていること

Webページなどを見るユーザーのデバイスに指定したフォントが入っていないと、代替フォントに変わってしまいます。一般的な環境で閲覧できる可能性が低いものを指定しても、思ったようには表示されません。

書体を決めるときはデザインだけを考慮するのではなく、相手のPCやスマホにも入っていると考えられるものを選びましょう。

OSごとにフォントは異なる

WindowsやMac・iOSなど、OSによってデフォルトで持っているフォントが違います。font-familyを使うときには、OSごとに分けて指定するとよいでしょう。

AndroidのフォントはOSのバージョンやメーカーによって大きく異なってくるため、すべてに対応するのが難しいといわれています。WindowsやMac、iOSで使用されるフォントを想定して選ぶのが無難です。

最後に総称フォントファミリーを記載する

font-familyを使って宣言するとき、最後の候補として「総称フォントファミリー」を記述します。

総称フォントファミリーとはどのOSでも対応できるフォントタイプの総称のことで、5種類に分けられます。日本語と英語の対応は以下のようになっています。コードに書くのは英語表記です。

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

フォントの大きな分類を指定する区分のため、各総称フォントファミリーの中で実際にどの書体が使われるのかは環境によって異なります。

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


 CSSを適切に設定してフォントを調整しよう

CSSでフォントを変えたり特定のものを指定するには、font-familyを使用します。見る側のOSに指定したフォントがインストールされている必要があるため、表示できないケースも想定して複数のフォントを記述しておくと安心です。

font-familyの指定には、英語専用フォントを最初に記述する・表記にスペースのあるフォントは「'」で囲うといった決まりが存在します。いずれのフォントにも対応していないときに備えて、「総称フォントファミリー」の記述も欠かせません。

CSSでフォントを変更・指定する方法をマスターし、ユーザーが見やすいWebサイトを作りましょう。

ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava・フロントエンド研修(通学、オンライン・リモート講座)の受け入れを行っており、助成金を活用すれば費用負担を軽減して研修受講ができるのでお気軽にお問い合わせ下さい。


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。