ウェブフォント使用方法

[ ID : 929 ]
ウェブフォント使用方法

概要

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;
}

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録