デイトラweb制作中級編 DAY21
nakano
Webフォント、デバイスフォント
デバイスフォント
→ 端末によって表示されるフォントが違う
Webフォント（Googleフォント）
→ どの端末でも共通のフォントを表示
・デバイスフォントでは表現できない
・デバイス関係なく同じフォントで表現したい
場合は Webフォント
Googleフォントで変更
変更した箇所
①メニュー（regular 400）
②見出し（bold 700）
③Newsの日付（regular 400）
④Newsの「more」リンク（bold 700）
⑤Priceのテーブルの見出し（bold 700）
⑥フッターメニュー（regular 400）
⑦コピーライト（regular 400）
※英数字部分を「Lato」、日本語部分を「Noto Sans JP」
フォントファミリーは変数管理
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');
$font-en: 'Lato', sans-serif;
$font-ja: 'Noto Sans JP', sans-serif;「body」の「font-family」にも設定
body {
font-family: $font-ja;
}まとめ
今回は作成したWebサイトのフォントをGoogleフォントで変更しました。
使いたいフォントを見つけてから変更するまでそれほど手間はかからなかったです。
自分のポートフォリオをスマホで見たとき、フォントが意図したものと違う形で表示されていたので、学んだことを活かして直しておきます！
