HTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLのページ全体をフォント指定する方法について解説しています。全体のフォントを指定する場合はhtmlタグあるいはbodyタグを対象にCSSで設定を行います。書き方と画面上での見え方を確認しましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
HTMLのページ全体をフォント指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
ページ全体をフォント指定する方法について詳しく説明していくね！
お願いします！
フォント種類を指定する方法
カスケーティングスタイルシート（CSS）のプロパティであるfont-familyにフォントの名前を指定することにて、 フォントの種類を変更できます。従来の手法では、ユーザーのパソコンにも、指定のフォントがインストールされていなければ、代替の標準フォントが使用される仕組みになっています。
近年は、CSS3にて、「Webフォント」の仕組みが実装されたことにより、コンテンツデリバリーネットワーク（CDN）から配信されている共通のフォントが参照されることによって、概ねあらゆる環境でも隔たりなく表示できるようになりました。
ページ全体のフォントを指定するには
htmlタグ、あるいは、bodyタグに、font-familyをカスケーティングスタイルシート（CSS）から設定できます。以下、指定方法のサンプルコードです。
See the Pen
2020-03-23-sample-15 by YOHEI INAI (@yohei_inai)
on CodePen.
※上記のサンプルコードでの表示にて、一部のブラウザやOSの種類によって、正常に表示されていない可能性があります。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
ページ全体のフォントを指定してみよう
以下、ページ全体のフォントの種類を既存のフォントの種類から変更するためのサンプルコードです。「Webフォント」であるGoogle fontの一例に説明します。まず、headタグの内部に以下の記述を追加します。
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP|Open+Sans&display=swap" rel="stylesheet">
次に、 htmlタグ、もしくは、bodyタグに、フォントの種類を指定することが必要です。以下、「Webフォント」であるGoogle fontを使用した一例のサンプルコードです。
See the Pen
2020-03-23-sample16 by YOHEI INAI (@yohei_inai)
on CodePen.
上記の他にも、ページ全体のフォントを華やかに彩れる沢山のWebフォントがあります。
息抜きも兼ねましてから、ご自身にとっての好みのWebフォントも探してみましょう。
監修してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
