概要
Webフォントの読み込み方法用途
- Google Fontsを使用する方法を記載。
- head内で外部読み込み。
実装方法
- 公式サイト:(Noto Sans Japaneseのウエイト400,700を選んだ状態)
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=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
...
</head>
CSS
.ff-noto {
font-family: 'Noto Sans JP', sans-serif;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)