CSSでフォントを変更する方法を初心者向けに解説。コードサンプルも
使う文字フォントによって、サイトやブログの印象が変わります。この記事では、CSSでフォントを変更する方法を解説します。具体的な書き方も提示しますので、Webサイトでフォントを変更・設定したいときに役立てましょう。
目次[非表示]
- 1.CSSでフォントを変更する方法
- 1.1.font-familyを使う
- 1.2.font-familyの役割とは
- 2.font-familyの指定方法
- 2.1.フォントの指定方法
- 2.2.複数のフォントを指定する方法
- 2.3.サイト全体にフォントを指定する方法
- 3.知っておくと何かと便利なルール
- 3.1.前に書かれたフォントを優先
- 3.2.英語フォントが日本語フォントより前に
- 3.3.半角スペースが入る場合は「'」を使う
- 4.フォントを指定する上での注意点
- 4.1.PCにフォントがインストールされていること
- 4.2.OSごとにフォントは異なる
- 4.3.最後に総称フォントファミリーを記載する
- 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でを使うときは、一つだけでなくいくつかフォントを指定しておかなければなりません。具体的な方法は「複数のフォントを指定する方法」を参考にしましょう。
■関連記事
フロントエンド入門5日(HTML・CSS・JavaScript)講座ー株式会社ジョブサポート
font-familyの指定方法
font-familyで書体を指定するには、具体的にどのような記述をすればよいのでしょうか？サンプルコードも提示しながら解説していきます。ルールを押さえて正しく書けるようになりましょう。
フォントの指定方法
CSSでフォントを指定するには、以下のように記述します。「p」の部分は任意のセレクタ（HTML要素）、「MS 明朝」の部分はフォント名（フォントタイプ）に置き換えます。
他のプロパティ同様、プロパティの後にセミコロンを置きその後に値を指定する書き方です。上記ではフォント名にスペースが入っているため、「"」で囲んでいます。
複数のフォントを指定する方法
一般にfont-familyを使ったフォント設定では、複数指定するのが一般的です。特定のフォントがOSやユーザー側の環境にないため表示できず、代替フォントになってしまう可能性があるためです。
いくつか指定しておくと、最初のものがなくても次を探すといった仕組みになっています。複数指定したいときは、次のように宣言します。
フォント名称の間に「,」を入れ、それぞれのフォント名を「'」または「"」で囲みます。いずれの候補も表示できない場合、「総称ファミリー名」と呼ばれるフォントの中からユーザー環境にあるものが選ばれます。
サイト全体にフォントを指定する方法
Webページで特定の要素だけフォントを変えることは、見やすさの観点からも考えにくいでしょう。ページのすべてに一括設定する方法が手間もかからないため一般的です。
font-familyの指定をWebページやHTMLメール全体に対してまとめて適用する場合、bodyセレクタに対するスタイルとして記述します。コードの書き方は下記の通りです。
bodyセレクタには他にも、ページの幅など全体に表示したいスタイルが記載されます。
■関連記事
オンラインリモート講座(入門5日・基礎10日)ー株式会社ジョブサポート
知っておくと何かと便利なルール
font-familyでフォントを変更・設定するコードを書くにあたって、いくつかの決まりがあります。代表的な決まりを三つ確認しましょう。
前に書かれたフォントを優先
いくつかのフォントを記述したとき、優先的に表示されるのは先に書かれたフォントです。具体例を見ていきます。
例えばこのようなコードの場合、最優先で表示されるのは「Yu Gothic」です。「Yu Gothic」が表示できない場合は「Yu Gothic Medium」が、それも表示できなければ「メイリオ」というように移っていきます。
英語フォントが日本語フォントより前に
フォントには、英語だけに使われるものと日本語と英語どちらにも使われるものがあります。font-familyを記述する際には、英語専用の書体を先に記述するようにしましょう。
英語表記のときは優先した英語フォントが、日本語表記の場合には以降に続く日本語のフォントが使われるようになるためです。
上記のコードでは「Arial」は英語フォントのため、英語表記では「Arial」が適用されます。「Arial」と「Courier」はどちらも日本語に使えないので、日本語の文字は「メイリオ」で表記されます。
英語の文字も日本語の文字もすべて統一したいという場合は、一番先頭に日本語のフォントを持ってくれば可能です。
半角スペースが入る場合は「'」を使う
「Yu Gothic Medium」や「MS ゴシック」のように、フォント名のに半角スペースが入るものがあります。
スペースが入っているフォント名は「'」もしくは「"」で囲む必要があります。そのまま記述すると、フォント名として認識できないため注意が必要です。
■関連記事
通年開講プロエンジニアコース(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
フォントの大きな分類を指定する区分のため、各総称フォントファミリーの中で実際にどの書体が使われるのかは環境によって異なります。
CSSを適切に設定してフォントを調整しよう
CSSでフォントを変えたり特定のものを指定するには、font-familyを使用します。見る側のOSに指定したフォントがインストールされている必要があるため、表示できないケースも想定して複数のフォントを記述しておくと安心です。
font-familyの指定には、英語専用フォントを最初に記述する・表記にスペースのあるフォントは「'」で囲うといった決まりが存在します。いずれのフォントにも対応していないときに備えて、「総称フォントファミリー」の記述も欠かせません。
CSSでフォントを変更・指定する方法をマスターし、ユーザーが見やすいWebサイトを作りましょう。
