フォントまわりのCSS
サイト内のベースフォントサイズを設定
CSS
html{
font-size: 62.5%;
}
body{
font-size: 1.6rem;
}サイト内のフォントのベースサイズを”16px”に指定
1.6rem = 10px ×1.6
Webフォント
<link>でWebフォントを読み込む場合
CSS
body{
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}※HTMLで「Roboto」「Noto Sans JP」を<link>で読み込む設定を行っていることが前提
Webフォント(Googleフォント)を<link>で読み込む例
@importでWebフォントを読み込む場合
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body{
font-family: 'Roboto', sans-serif;
}※Googleフォントで「Roboto」を指定し、@importでのコードを取得