フォントまわりのCSS

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でのコードを取得