CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

font-familyを使ってフォントを指定する方法をCSS初心者向けに解説した記事です。サンプルコードを使って実践的に解説。閲覧者がフォントをインストールしていない際の、複数の候補の設定方法も紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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>

 

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

font-familyを使う

使い方は簡単で、「font-family:」のあとに指定するフォントを記述するだけです。

例えばこのようになります。sans-serifはゴシック体のことです。

p.sample1 {font-family:sans-serif; }

ブラウザで表示させると、このように文字列がゴシック体で表示されています。

150602_ff_1r

 

田島悠介

値に”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にインストールされているフォントの中からゴシック体系のフォントで文字列が表示されます。

arial unicode ms

 

font-familyの書き方の例

最後に、実際に使われている、font-familyの書き方の例をいくつか見ていきましょう。

※ブラウザはchrome、言語は日本語で確認した例です。

Google

https://www.google.co.jp/

font-family: arial, sans-serif;

 

Twitter

https://twitter.com/

font-familyArial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

 

facebook

https://www.facebook.com/

font-familySF Optimized, system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;

 

Gigazine

http://gigazine.net/

font-familysans-serif;

 

NEVER まとめ

https://matome.naver.jp/

font-familyarial,sans-serif;

 

TechAcademy

https://techacademy.jp/

font-family"Open Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

 

今回の記事は以上です。

 

田島悠介

設定したフォントが表示されるかどうかは、閲覧する側の環境によるということだね。

大石ゆかり

候補を複数指定しておくと、見る人の色々な状況に対応できますね。

田島悠介

font-familyによって指定しなかった場合のデフォルトのフォントも、ブラウザなどの環境によって変わるんだ。合わせて覚えておこう。

大石ゆかり

分かりました。ありがとうございます!

 

CSSの基礎をさらに学びたい場合は、CSSのスタイルの優先順位も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。