デイトラWeb制作コース中級編DAY21 Webフォント、デバイスフォントを理解する

デイトラの動画と回答例では@importを使ってCSSで読み込むようにしていましたが、私は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=Lato:wght@400;700&family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet">
$font-family-japanese: 'Noto Sans JP', sans-serif; // 日本語フォント
$font-family-english: 'Lato', sans-serif; // 英語フォント
body {
  font-family: $font-family-japanese;
}
.section-title {
	font-family: $font-family-english;
}
.header__nav {
	ul {
		li {
			a {
				font-family: $font-family-english;
			}
		}
	}
}
.info__published {
	font-family: $font-family-english;
}
.news__link {
	a {
		font-family: $font-family-english;
	}
}
.table-default {
	th {
		font-family: $font-family-english;
	}
}
.footer__nav {
	ul {
		li {
			a {
				font-family: $font-family-english;
			}
		}
	}
}
.footer__copy {
	font-family: $font-family-english;
}

下に付け加えて上書きする形でもいいですし、該当箇所を探して追加してもいいですね。次は「コーディング後の品質を担保するテスト」です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次