Webで遊ぼ!

Web制作を
遊び感覚で。

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

 > 

フォントの種類の調整

フォントの種類の調整


チラシや街中の看板、企業のロゴなどには様々なフォントが使われていますよね。Webサイトにも様々なフォントを設定することができます。
しかし、Webサイトは多種多様なデバイスで開かれるので、必ずしも設定したフォントで表示されるとは限らない場合もあります。
フォントが違って表示されるだけでWebサイト全体のイメージもだいぶ変わってしまうので、フォントの種類の指定は超重要なポイントです。

フォントの種類の指定は慎重に!

前回の記事ではフォントの大きさや太さなど、フォントの微調整に関するCSSを紹介しましたが、今回はフォントの種類そのものを設定するCSSの話です。
フォントの種類の設定においては、pxやremといった単位に気をつける必要もなく、設定の仕方自体はフォントサイズなどと比べても簡単です。ですが、フォントサイズなどとは決定的に違う点があります。

それは、フォントの種類の表示は、ブラウザではなくOSにインストールされているフォントに依存するという点です。

フォントサイズであれば、WindowsでもMacでも、AndroidでもiPhoneでも、OSによってサイズ感が全然違うということにはなりません。
フォントサイズの調整はOS依存ではなく、ブラウザがしっかり調整してくれる部分なので、OSによって差が出てしまうということは基本的にないというわけです。
しかしフォントの種類に関しては、ブラウザにフォントがインストールされているわけではありません。
ブラウザに限らず文章入力ソフトなどでも様々なフォントが使えるのは、OS自体に多種多様なフォントがインストールされているからです。
そしてここで問題となるのは、全てのOSに同じフォントがインストールされているわけではないということです。
フォントの種類に関しては、「このフォントが好きで読みやすいから、これに設定しよう」というだけでは不十分と言えます。

CSSの設定の仕方自体はすごく簡単ですが、気をつけなければならないポイントが他のCSSプロパティとは大きく異なるという意味で、今回はフォントの種類の設定に的を絞って説明していきます。


◆ font-family(フォントファミリー)とは ◆

font-family(フォントファミリー)プロパティは、フォントの種類を調整するプロパティです。

■ セレクタ { font-family: ‘フォント名’; }
といった形で記述します。

この時、初心者を悩ませるのが
「フォント名にクォーテーションをつけるの?つけないの?ダブルクォーテーション?シングル?」
…という問題です。

結論、総称フォントファミリー以外、シングルクォーテーションで囲っとけばOKという認識で良いと思います。

解説サイト等では、「フォント名に日本語が入る時は必ずクォーテーションをつける」とか、「スペースが入る時は〜(以下略)」とか、色々書かれていますが、こういった場合でもクォーテーションをつけないでCSSが効いたりしてしまいます。
だからこそ、結局何が正しいのかよくわからなくなるのですが、「クォーテーションをつけたらNG」という場面はほとんどありません。(後述の総称フォントファミリーの指定時ぐらいです)
なので、会社やチームのルールがある時はそれに従い、自分一人でWebサイトを制作する時は「総称フォントファミリーの指定以外は、どんな時でもシングルクォーテーションをつけておく」というルールを決めておくと悩まずに済むかと思います。

    POINT!
  1. ・font-familyはフォントの種類を調整する!
  2. ・総称フォントファミリー以外は、シングルクォーテーションで囲っとけばOK!

◆ 総称フォントファミリーとは ◆

先ほどから「総称フォントファミリー」という言葉が出てきていますが、これは、どのようなデバイス・ブラウザから見ても確実にその系統(ゴシック・明朝など)のフォントが表示されるフォントファミリーのことです。

冒頭で、「Webサイトのフォント表示はデバイスにインストールされているフォントに依存する」と言いましたが、これにウソはなくてその通りです。
しかし、これにウソがないとすると、総称フォントファミリーという存在自体に矛盾が生じるように思えますよね。
なぜ総称フォントファミリーと呼ばれるものは、全てのデバイスで表示可能なのでしょうか?

それは、総称フォントファミリーを指定しておくと、ブラウザがそのデバイスで表示可能なフォントに変換するという仕組みになっているからです。
なので、総称フォントファミリーは指定したフォントが表示されない場合の保険という目的で設定されます。

総称フォントファミリーの種類はこの後で紹介しますが、総称フォントファミリーというフォントがあるわけではなくて、あくまでそのデバイスで表示可能な同系統のフォントに変換するように命令を出している…そんなイメージです。
そのため明朝体とかゴシック体とか、ざっくりとした指定しかできず、当然ながらデバイスやブラウザによって違うフォントで表示されます。

・総称フォントファミリー一覧

名称字体
serif明朝体
sans-serifゴシック体
cursive手書き体 Tegakitai
fantasy独特な装飾文字 fantasy
monospace等幅で表示

ご覧のように、cursiveやfantasyは英字にしか効果が及ばない上、読みやすいわけでもないです。
なので、設定したフォントが表示されない場合の保険という意味合いが強い総称フォントファミリーの中では、使用機会はあまりないかと思います。
そもそも、Macユーザーの方には何も変化なく見えていると思います。保険のための総称フォントファミリーとは言え、装飾系のフォントはOSによっては効かないことがあるので、なおさら使う機会はないです。

フォント指定に特にこだわりがなく、ゴシック体か明朝体かだけ指定できれば良いという場合は、総称フォントファミリーのみでfont-familyを指定しておいてもダメなわけではありません。
ただ、総称フォントファミリーに頼らずとも「全てとは言わないが多くのデバイスで表示可能」というフォントもたくさんあるので、まずはそういったフォントからWebサイトのデザインに合ったものを選定することが大切です。

    POINT!
  1. ・総称フォントファミリーとは、全てのデバイスで同系統のフォントを表示させられる設定のこと!
  2. ・総称フォントファミリーは、設定したフォントが表示されない場合の保険として使う!

◆ font-family の記述順序 ◆

font-familyのCSSの書き方は既に紹介しましたが、総称フォントファミリーの存在と他の注意点も踏まえた上で、もう一度確認していきたいと思います。

font-familyのCSSの記述は、

■ セレクタ { font-family: ‘フォント名’; }

でしたよね。ですが、これだけだと指定したフォント名が表示されない場合の保険がありません。
そこで、保険として総称フォントファミリーを付け加えます。

■ セレクタ { font-family: ‘フォント名’ , sans-serif; }

「,(カンマ)」で区切って、総称フォントファミリーを設定しました。
CSSでは命令が順々に読み込まれるので、優先的に適応させたいフォント指定を最初に書き、保険としての総称フォントファミリーは最後に書きます。

そしてここでもう一つ注意点です。
フォントの種類によっては「英数字にしか効かない」というケースも多くあります。
逆に言えば、英数字だけ特定のフォントで表示させたいということもよくあるでしょう。
そういった場合、かなや漢字・英数字など全ての表記に対応したフォントを先に指定してしまうと、英数字も含めてそのフォントで表示されてしまいます。
なので、英数字だけ特定のフォントに設定したいという場合、そのフォントを先頭に記述する必要があります。

たとえば、「英数字だけに対応したフォントAで英数字を表示させ、日本語はフォントBで表示」と設定したい場合は

■ セレクタ { font-family: ‘フォントA’ , ‘フォントB’ , sans-serif; }

という順番になるというワケです。

    POINT!
  1. ・font-familyを記述する時、総称フォントファミリーは最後に書く!
  2. ・優先させたいフォント指定から先に書く!

ワンポイントチェック

今回紹介した font-family プロパティですが、記述の順番や総称フォントファミリで保険をかけておくということ以外にも、気をつけなければならない点があります。
それは、1文字でも間違っていると効かないという点です。

フォント名は、Macユーザーであれば、Finder → アプリ → Font Book から確認できます。
Windowsユーザーであれば、大体のPCにプリインストールされていることが多い「Word」ソフトを開き、フォント設定の一覧から確認するのが手取り早いと思います。
ただし、そうやって自分のPCで確認して、自分のPCでfont-familyの指定がうまくいったからといってもまだ安心はできません。
例えば、読みやすくて人気の高い「游ゴシック」ですが、Windowsでのフォント名は「游ゴシック」なのに、Macでは「游ゴシック体」という名前になっており、『体』という1文字の差で、効く・効かないに分かれてしまいます。

Windows、Mac、それぞれのフォント名はネットで検索すればすぐ分かることではありますが、実際に設定が効いているかどうか自分の目で確かめたいという場合は少なくありません。
様々なデバイスに触れておくこと自体がWeb制作者として良い経験になりますし、Web制作を本格的にやってみたいという方は、メインのデスクトップPCとサブのノートPCでそれぞれどちらかをWindows、もう片方をMacというふうに使い分けてみるのも良いと思います。

※全てWin、Macで統一した方が、データのやり取りや管理が楽になるなどのメリットも大きいので、一概には言えません。

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

HTML(Googleフォントのリンクは消してあります)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="fontfamily.css">
  </head>
  <body>
       <h1>ホームページタイトル</h1>
       <hr>
       <p class="serif">明朝体の総称フォントファミリーserif</p>
       <hr>
       <p class="inkfree">Dokutoku na eiji wo jitsugen Ink Free(インクフリーは英字にしか効かないので、サブでフォントを設定:HGP行書体)</p>
       <hr>
       <p class="kyoukasho">教科書のような字体の「UD デジタル 教科書体 NP-B」</p>
       <hr>
       <p class="webfont">ここにはWebフォントをいれてみます。</p>
  </body>
</html>


CSS(Webフォントの設定は消しています)

html {
  font-size: 32px;
}

 h1 {
  font-family: 'HGS創英角ポップ体',sans-serif;
}

.serif {
  font-family: serif;
}

.inkfree {
  font-family:'Ink Free','HGP行書体',sans-serif;
}

.kyoukasho {
  font-family: 'UD デジタル 教科書体 NP-B',sans-serif;
}


« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
RO・Y・DO(rowaido)

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン