HTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLのページ全体をフォント指定する方法について解説しています。全体のフォントを指定する場合はhtmlタグあるいはbodyタグを対象にCSSで設定を行います。書き方と画面上での見え方を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
ノマリカ
伝わりやすくて明快なデザインを得意としている。
HTMLページ全体のフォントを指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
ページ全体のフォントを指定する方法について詳しく説明していくね！
お願いします！
フォントを指定する方法
以下のように、CSS内の指定したい箇所にfont-familyプロパティを書くことで、 フォントの種類を指定できます。
p { font-family: 'Helvetica', sans-serif; }
上記は、優先度を高く設定したフォント「Helvetica」がPCにインストールされていない場合、最後に指定したsans-serif（ブラウザの初期設定のフォント）が適用されます。
複数のフォントを指定する場合、左から優先度の高い順に指定します。
ページ全体のフォントを指定する方法
ページ全体のフォントを指定する場合は、一般的にbodyタグにfont-familyを指定します。
body { font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif; }
上記は、Hiragino Kaku Gothic Pro（Macに標準搭載のフォント）→ Meiryo（Windowsに標準搭載のフォント）→ sans-serif（ブラウザの初期設定のフォント）といった優先度順で適用されます。
Webフォントを指定してみよう
ページ全体のフォント指定にWebフォントである「Google Fonts」を利用してみましょう。
今回は、本文テキストによく指定されている「Noto Sans Japanese」のRegular 400を指定します。
ページにアクセスしたら、Stylesの中からRegular 400を見つけて「Select this style」をクリックして選択します。
さらに使用するための準備として、headタグ内にlinkタグを追加する方法「<link>」と、CSSに読み込み指定を追加する方法「@import」のどちらかを選択します。
HTMLを編集せずにCSSのみで完結させたい場合などは、後者がおすすめです。
headタグ内にlinkタグを追加する場合のコード例
以下のコードをHTMLのheadタグ内に貼り付けます。
<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=Noto+Sans+JP&display=swap" rel="stylesheet">
CSSに読み込み指定を追加する場合のコード例
以下のコードをCSSに貼り付けます。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
上記ができたら準備は完了です。
以下のように、bodyタグのfont-familyに、'Noto Sans JP' を指定しましょう。
body {
font-family: 'Noto Sans JP', sans-serif;
}
ブラウザ表示で、フォントが指定されていることを確認して完了です。
まとめ
今回はHTMLページ全体のフォントを指定する方法について説明しました。
ページ全体のフォント指定は、その時々のトレンドやブラウザ事情が反映されています。
近年はテキストを華やかに彩るたくさんのWebフォントがありますので、積極的に取り入れたいものです。
気に入ったWebサイトのフォント指定が、どのようなフォントの組み合わせなのかをデベロッパーツールなどで調べてみるのもおすすめです。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
