Google FontsのWebフォントを利用する方法は2パターンあります。
- フォントを外部から呼び出して利用する
- フォントをダウンロードして利用する
今回はフォントを外部から呼び出して利用する方法を紹介します。
Google Fonts を利用する4つのステップ
- Google Fonts へアクセス
- フォントを選ぶ
- HTMLに<link>コードを挿入
- CSSにfont-familyを挿入
1. Google Fontsへアクセス
下記URLからGoogle Fontsの公式サイトへアクセスします。
2. フォントを選ぶ
下図のように様々なフォントが並んでいるので利用したいフォントを選びます。
ここでは Noto Sans JP を選びました。
次に選んだフォントのウェイト（太さ）を選びます。
利用したいウェイトの右横にある ＋ Select this style をクリックすると選べます。
ここでは Regular 400 のウェイトのみ選びました。（複数選択可）
フォントのウェイトを選んだ後は右上のアイコンをクリックします。
右上のアイコンをクリックすると右側からドロワーが開きます。
下図のように右側から出てきたドロワーの Use on the web の欄に<link>と@importがあるので<link>を選びます。
3. HTMLに<link>コードを挿入
上図にある③のコードをHTMLの<head>~</head>の間に挿入します。
（このコードにはlink要素が2つ入っています）
4. CSSにfont-familyを挿入
上図にある④はCSSのプロパティ（font-family）です。利用したいセレクタに挿入します。
以上で一通り利用できるようになります。
利用したいフォントが複数ある場合
複数ある場合には少し注意が必要です。
今回の例では Noto Sans JP と Pattaya の2つのフォントを利用したいとします。
HTMLに埋め込むコード(link要素)は2つのフォントの情報がまとめて記述されています。
このコードは複数のフォントを利用する場合でもこれ1つ挿入すればOKです。
それに対しCSSのセレクタに埋め込むプロパティ(font-family)は1つずつ用意されます。
プロパティは利用したい箇所にそれぞれ挿入してください。
使用例
ここでは分かりやすいようにフォント以外の要素をほとんど省いています。
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Pattaya&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Title</h1>
<p>本文</p>
</body>
</html>h1 {
font-family: 'Pattaya', sans-serif;
}
p {
font-family: 'Noto Sans JP', sans-serif;
}