フォントはWebサイトのデザインで最も重要な役割を担っています。「いまいちサイトの見栄えが良くない。」という悩みは大抵フォントを変えることで解決することができます。
CSSプロパティの一つ、font-familyの値を変えると文字のフォントを自在に変更することができます。
この記事では、font-familyのルールと注意点について解説していきます。また、フォントが効いていないときに確認することも解説します。
この記事を読めば、font-familyプロパティについて理解が深まることを保証します！
- font-family のルールと使い方の基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSのfont-familyとは
font-familyとは、文字のフォントを指定することができるプロパティです。基本書式は下記です。
font-familyの基本書式
セレクタ名 {
font-family: フォント名;
}基本書式だけではわからないと思いますので、具体的には下記のような例で使用します。
<p class="font1">フォントを指定します！</p>.font1 {
font-family: serif;
}表示結果
フォントを指定します！
.font1のCSSのフォント名を変えれば、フォントの表示を変えることができます。
font-familyプロパティには、いくつかのルールがありますのでそれをこれから簡単に解説していきます！
font-familyのルールと注意点について
font-familyのルールと注意点について、まずは簡単に紹介していきます。
- 英語フォントが先、日本語フォントが後ルール
- 左から順に優先度の高いものを書く
- 最後に総称フォントを書く
- なにも指定しないと、ブラウザの初期値が設定される
- なにも指定しなければ、親要素を継承
- フォント名の指定の仕方のルールがある
- 游ゴシック使用上の注意点
たくさんありますが、ひとつずつ解説していきます！
英語フォントが先、日本語フォントが後
英語フォントは日本語フォントに対応していないため、日本語フォントを後に設定します。フォントの指定順番を逆にした時の表示を確認します。
<p class="font1">日本語フォントが先！、英語fontが後！英語にもserifが適応。</p>
<p class="font2">英語fontが先！、日本語フォントが後！英語にもalialが適応。</p>.font1 {
font-family: serif, arial; /* arialは英語フォント */
}
.font2 {
font-family: arial, serif;
}表示結果
日本語フォントが先！、英語fontが後！英語にもserifが適応。
英語fontが先！、日本語フォントが後！英語にもalialが適応。
順序を逆にしたものを適用してみましたがいかがでしょうか？
「日本語フォントを先に設定」したほうは、英語フォントの出番がないままの状態で表示されてしまいました。（英語部分も日本語フォントが適用されている）
対して「日本語フォントが後」のほうは、英語フォントもちゃんと適用されて表示されています。
文章の中に英語も混じっていれば、必ず英語フォントを先、日本語フォントを後、というふうに設定しましょう！
左から順に優先度の高いものを書く
複数のフォントを指定する場合で、下記の書き方をします。
p {
font-family:優先度１のフォント,優先度2のフォント,優先度3のフォント;
}また、閲覧者のPCに該当のフォントがインストールされている必要があります。
候補1のフォントがなかった場合は候補2、候補2もなかった場合は候補3、というようにフォントが決まっていきます。
仮に、フォントAをfont-familyで指定したとします。
- フォントＡが入っているwindows→ フォントＡが表示
- フォントAが入っていないMac→ 代替フォントが表示
といった具合です。そのために、複数のフォントを指定しておきます。
さらに、Windows,Mac,iPhone,Androidなどさまざまな端末・OSに対応するためでもあるので、安全性のために複数のフォントを適用しておきましょう！
最後に総称フォントを書く
総称フォントとは、いわゆる明朝系、ゴシック系などの特定のフォント名を持たないフォントのことです。
総称フォントの例をとしては、以下のようなものがあります。
- sans-serif：ゴシック系のフォント
- serif：明朝系のフォント
- cursive：筆記体・草書体のフォント
- antasy：装飾的なフォント
- monospace：等幅フォント
こちらのフォントは、保険的に使われる場合が多いです。つまり上記で説明した左から記述していたフォントが表示されなかった場合に表示されるものになります。
font-family{
優先度1のフォント,優先度2のフォント,優先度3のフォント,serif;
}優先度1が表示されなければ優先度2のフォントが表示されるわけですが、それも表示されなければ優先度3のフォント、というふうに適用されていきます。そしてどのフォントでも表示されなかった場合に備えて、最後につけた総称フォントが表示される、といった具合です。
端末やOSによって表示される・されないものがありますので、どのフォントでも適用されなかった場合の保険として総称フォントを指定しておきましょう！
なにも指定しないと、ブラウザの初期値が設定される
セレクタ自体にフォントを指定しないで表示させた場合、ブラウザの初期値が設定されます。
ただ、ブラウザごとに初期値が違うので、統一させるためにもフォントは指定しておきましょう。
なにも指定しなければ、親要素を継承
それぞれのセレクタ自体にフォントを指定していっては効率が悪いですし、記述忘れも想定されます。なので、サイト全体にフォントを適用するために、bodyタグにフォントを適用します。
例えば、以下のｐタグにフォントを適用せず、bodyタグにフォントを適用する場合の表示は以下のようになります。
<!-- このpタグにはフォントしていない -->
<p>この文章にはフォントを指定していません。</p>body {
font-family: "Noto Serif";
}表示結果
この文章にはフォントを指定していません。（ボディに指定したフォントが出力されます）
pタグにはフォントを適用していないので、その親要素であるbodyタグで適用したフォントを継承して上のような結果になりました。
全体的に使うようなフォントは、bodyタグに適用しておくと便利です。
フォント名の指定の仕方にルールがある
font-familyのフォント名には、スペースがあるものとスペースがないものがあります。スペースのあるなしによってフォント名の適用の仕方が違います。
フォント名にスペースある
ダブルクォーテーション or シングルクォーテーションで囲みます。
- Noto Sans
- MS ゴシック
- Noto Serif ...など
フォント名にスペースがない
囲む必要なし
- serif
- arial
- roboto...など
游ゴシックの使用上の注意点
游ゴシックは、ＷindowsとMacでfont-familyで指定するときの名前が違うという特徴があります。
- Windows：”游ゴシック”または、 “Yu Gothic”
- Mac ： “游ゴシック体”または、YuGothic
また、細字でかすれて読みづらい、というのもあるので、そちらに対応するための指定もしなければなりません。
- Mac対応：「”游ゴシック体”, YuGothic」
- Windows対応：「”游ゴシック Medium”, “Yu Gothic Medium”」
- 古いWindows対応：「”游ゴシック”, “Yu Gothic”」
- 游ゴシックがないWindows対応「メイリオ」
フォントが反映されないときに確認したいこと
フォントが正しく表示されていないときは、上記のルールを確認してみましょう。
下記は反映されない場合の例と改善例です。
フォントが反映されないときに確認したいこと
- 英語に日本語フォントが指定されている ⇀ 英語フォントと日本語フォントの指定の順番を確認する
- font-familyが反映されていない ⇀ 指定font-familyのスペルミス、記述ミス 、スペースがない、など。
- 複数のフォントを使用し、優先度の低いフォントが先に表示されている ⇀ 左から優先度の高いフォントを指定する
font-familyにWebフォントを指定する方法
WindowsやMacなどさまざまな端末・OSでも同じようなフォントを表示したい！というときに使えるのが、Webフォントです。
代表的なWebフォントは、以下のようなものがあります。
- Googleフォント （無料）
- Adobe Typekit （有料）
- TypeSquare （有料）
Webフォントの使い方 (Googleフォントの使い方)
まずはGoogleフォント公式サイトにいきます。
使いたいフォントを決めて、そのフォントの詳細ページにいきます。
例えばここでは、「Lato」という英語フォントを選択しました。
そのフォントの使いたい太さを選んで、右側にフォントデータを読み込むものがあるので、それをHTMLのheadタグに埋め込みます。
いっしょに日本語フォントであるNoto Sans JPも選択して、そちらもheadタグに埋め込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Document </title>
<!-- ここからGoogleフォント -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,100;1,300;1,900&family=Noto+Sans+JP:wght@300;500;700&display=swap"
rel="stylesheet">
<!-- ここまでGoogleフォント -->
</head>
<body>
<p>Latoフォントと日本語フォントの文章です！</p>
</body>
</html>body {
font-family: 'Lato', 'Noto Sans JP',sans-serif;
}表示結果
これで英語フォントにはLato,日本語フォントにはNoto Sans JPが適用されました。
まとめ
いくつかのルールと注意点がありますが、それらを理解すればfont-familyも自在に使えるようになりますので、どんどん使っていきましょう。
font-familyの使い方まとめ
- 英語フォントが先、日本語フォントが後ルール
- 左から順に優先度の高いものを書く
- 最後に総称フォントを書く
- なにも指定しないと、ブラウザの初期値が設定される
- なにも指定しなければ、親要素を継承
- フォント名の指定の仕方のルールがある
- 游ゴシック使用上の注意点
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
