CSSでfont-familyを使ってフォントを指定する方法【初心者向け】
font-familyを使ってフォントを指定する方法をCSS初心者向けに解説した記事です。サンプルコードを使って実践的に解説。閲覧者がフォントをインストールしていない際の、複数の候補の設定方法も紹介。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。
CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。
本記事は、TechAcademyのWebデザインオンライン講座のCSSのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はfont-familyプロパティについて解説しよう。
田島メンター！！font-familyは何をするんですか～？
文字のフォントを指定するプロパティなんだ。値で示されたフォントが文字列に適用されるよ。実際の例で見てみよう。
分かりました！
font-familyとは
CSSのfont-familyプロパティを使用することによって、文字列のフォントを指定することができます。Webページを見せる際のフォントを指定したい場合は設定しましょう。
事前準備
事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。
ぜひ自分のPCでもやってみましょう。
HTMLファイル：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">ここに文章を表示</p>
</body>
</html>
font-familyを使う
使い方は簡単で、「font-family:」のあとに指定するフォントを記述するだけです。
例えばこのようになります。sans-serifはゴシック体のことです。
p.sample1 {font-family:sans-serif; }
ブラウザで表示させると、このように文字列がゴシック体で表示されています。
値に”sans-serif”を入力したことで、文字列にフォントが適用されたよ。
この部分によってフォントの種類が変わるんですね。
そうだね。値を変更してもう一度画面で確認してみよう。
今度は明朝体の「serif」にしています。先ほどの、sans-serifの部分をserifに変えるだけです。
p.sample1 {font-family:serif; }
ブラウザで表示させると、明朝体になりました。
また、フォントの指定は”MS 明朝”というようにフォントの「名称」で指定することもできます。
この際に名称を””などの引用符で囲んで入力します。ここでは「メイリオ」のフォントを指定しています。
p.sample1 {font-family:"Meiryo"; }
先ほどのようにブラウザ上ではメイリオのフォントになりました。
font-familyの書き方について注意点
font-familyの書き方について注意点です。これらのフォントを表示させるためには、作成者ではなく閲覧者のPCに該当のフォントがインストールされている必要があります。また、WindowsとMacではインストールされているフォントが異なるため、注意が必要です。
もしも閲覧者側に該当のフォントがなかった場合のために、あらかじめ次に表示させる候補を用意することができます。
その場合は下記のように記述します。
font-family: 候補1,候補2,候補3,フォントの種類;
「,(カンマ)」を入れる形で指定しておくと、候補1のフォントがなかった場合は候補2、候補2もなかった場合は候補3というようにフォントが決まっていきます。
また、英語フォントと日本語フォントの両方を指定する場合は、先に英語フォントを指定します。そうすることで、アルファベットには英語フォントが、日本語には日本語フォントが使用されるようになります。
最後の「フォントの種類」とは、指定した全てのフォントがインストールされていなかった場合に使用されるキーワードです。以下の中から指定できます。
| フォントの種類 | 使用されるフォント |
| serif | 明朝体系フォント |
| sans-serif | ゴシック体系フォント |
| cursive | 筆記体系フォント |
| fantasy | 草食系フォント |
| monospace | 等幅系フォント |
具体的な記述方法はこちらです。
p.sample1 {font-family: "游ゴシック","arial unicode ms",sans-serif;}
すると、「游ゴシック」がインストールされていないPCでは、2つ目に指定していた「arial unicode ms」が、両方インストールされていないPCでは、PCにインストールされているフォントの中からゴシック体系のフォントで文字列が表示されます。
font-familyの書き方の例
最後に、実際に使われている、font-familyの書き方の例をいくつか見ていきましょう。
※ブラウザはchrome、言語は日本語で確認した例です。
font-family: arial, sans-serif;
font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-family: SF Optimized, system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
Gigazine
font-family: sans-serif;
NEVER まとめ
font-family: arial,sans-serif;
TechAcademy
今回の記事は以上です。
設定したフォントが表示されるかどうかは、閲覧する側の環境によるということだね。
候補を複数指定しておくと、見る人の色々な状況に対応できますね。
font-familyによって指定しなかった場合のデフォルトのフォントも、ブラウザなどの環境によって変わるんだ。合わせて覚えておこう。
分かりました。ありがとうございます！
CSSの基礎をさらに学びたい場合は、CSSのスタイルの優先順位も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。
