サイトの印象を変える!CSSでフォントを指定する方法【初心者向け】

初心者向けにCSSでフォントを指定する方法について解説しています。フォントはサイトの印象を決める重要な要素なので、CSSでの書き方を覚えておきましょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はCSSでフォントを指定する方法を説明します。

フォント一つでサイトの印象が大きく変わるので、非常に重要な知識になります。実際の業務でも必ず必要になるので、覚えておきましょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター!!段落や見出しで使うフォントの種類を変更したいのですが、どうすればいいですか~?

田島悠介

フォントの変更にはfont-familyプロパティを使うよ。

大石ゆかり

値には何を指定したらいいんですか?

田島悠介

フォント名で指定する方法と、種類ごとに決まったキーワードによって値を指定する方法があるよ。それぞれの書き方を見てみよう。

 

目次

 

フォントを指定する書き方

実際にCSSでフォントを指定する方法を説明していきます。

フォントの指定には「font-family」というプロパティを使います。また、フォントの指定には「フォントファミリ名」で指定する方法と「総称ファミリ名」で指定する方法があります。

 

まず、フォントファミリ名での指定方法を説明します。

p{
  font-family: "MS Pゴシック";
}

上記のように書くことでフォントを指定することができます。

フォントの指定もWebページのコーディングにおいて大事な要素の一つになります。

また、総称ファミリ名で指定する方法では、次の5種類で指定することができます。

「sans-serif」 ・・・ ゴシック体系のフォント
「serif」 ・・・ 明朝体系のフォント
「cursive」 ・・・ 筆記体系のフォント
「fantasy」 ・・・ 装飾系のフォント
「monospace」 ・・・ 等幅系のフォント

 

また、候補としていくつか設定することができます。

font-family: 候補1,候補2,候補3;

上記のように”,”(カンマ)で区切って複数の候補を設定することで、候補1が使えない時、候補2のフォントを適用します。候補2が適用できない時は候補3を適用し、それを繰り返します。

フォントファミリ名を使ってもいいですが、候補の最後には総体ファミリ名を指定しましょう。

また、「cursive」を指定して日本語のテキストを表示しようとすると、一部環境ではそのテキストが正常に表示されないこともあるようです。

上記のように、利用者の各環境で正常に動作しないことも想定してコーディングしていきましょう。

 

田島悠介

font-familyの基本の書き方になるよ。

大石ゆかり

候補は複数指定することもできるんですね。

田島悠介

次は実際にフォントを変更して、ブラウザで確認してみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にフォントを指定してみよう

実際にコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS フォント</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <p class="font1">fantasy</p>
    <p class="font2">serif</p>

  </body>
</html>

 

CSS

p.font1{
  font-family: fantasy;
}

p.font2{
  font-family: serif;
}

ブラウザで確認してみましょう。

スクリーンショット 2016-08-30 21.37.31

一点注意しておきたいこととして、フォント名を指定していても、利用者の環境にそのフォントがインストールされていなければ指定したフォントでの表示はされません。

直接のフォントの指定をしてもいいですが、最後の候補に総体ファミリ名を入れるようにしましょう。

 

以上、CSSでフォントを指定する方法を解説しました。

 

田島悠介

ここでは2つの段落に異なったフォントを設定しているよ。

大石ゆかり

それぞれに値で指定されたフォントが適用されているのが分かりますね。

田島悠介

フォントは閲覧側の環境にインストールされていないと画面では表示されないんだ。複数のフォント候補を用意したりするのはそのためだね。

大石ゆかり

指定したフォントが表示されなかった場合のことを考えて、予備のものを用意しておくというわけですね。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。