Webフォントの利用
Googleフォントで利用したいフォントを選択し、<link>で設置するコードを取得することが前提です。
Googleフォント（https://fonts.google.com/）はこちら
<link>で読み込む
HTML
<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=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">”Roboto”と”Noto Sans JP”をGoogleフォントで設定するケース
※バリアブルフォントを設定（2025年5月現在）
※</body>直前に読み込む方が良いかも
@importでWebフォントを読み込む方法（CSS）はこちら
bodyにfont-family指定する例
CSS
body{
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
font-optical-sizing: auto;
font-style: normal;
}２行目、”font-optical-sizing”はフォントを読みやすくするためにブラウザが自動調整を行う指定。
auto…自動調整（デフォルト値）、none…キャンセル
auto（デフォルト値）にすると、小さな文字では横幅を少し広げる自動調整が行われ、大きな文字では逆に横幅を少し狭くする自動調整が行われる。