はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回はHTML,CSSでウェブサイトを模倣してみた時、Google Fontsを使用時に感じた内容をまとめました。
Google Fontsとは？
Googleが提供する無料のウェブフォントライブラリです。無料で利用可能で多様なフォントスタイルを簡単に導入できます。
Font Familyとは？
CSSのプロパティで、テキストにしようするフォントを指定するために使います。複数のフォント名を指定することができ、ブラウザが最初のフォントが表示できない場合、次のフォントを順に試します。
使用例
body{
font-family:'Noto Sans JP', 'Arial', sans-serif;
}
この例では、もしNoto Sans JPが利用できなければ、Arialが適用され、それもなければブラウザに内蔵されたsans-serifフォントが使われます。
Google Fontsの使い方
Google Fontsから「Noto Sans JP」というフォントを選んでウェブページを使いたい場合、以下のように行います。
使用例
1.Google Fontsからフォントを選ぶ
例：Google Fontsで「Noto Sans JP」を選ぶ
2.HTMLにフォントを読み込む
選んだフォントに対応するタグをHTMLに追加します。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
3.CSSでfont-familyを指定する
読み込んだフォントをCSSでfont-familyに指定します。
body {
font-family: 'Noto Sans JP', sans-serif;
}
Font-Familyについて参考にさせてもらったサイト
下記のICS MEDIAさんのサイトを参考に勉強させてもらいました。
Font-Familyについてのまとめ
上記のサイトで学んだ内容を私なりに整理してみました。
・fontの種類が多ければ多いほど、容量が増え通信スピードが遅くなる。
・fontの種類が多ければ多いほど、たくさんのOSでの表示をカバーできる。(フォールバック)
・OSのバージョンアップで急にフォントが変わる事がある。（そんなに多くはない）
どのOSの環境下でも無難に表示されるようにFont Familyを使用している。
・colorやfont-sizeなどのプロパティは都度組み合わせて対応すれば良い。
最後までご覧いただき本当にありがとうございました！！