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にインストールされているフォントの中からゴシック体系のフォントで文字列が表示されます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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を基礎から学ぶことができます。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
