Google Fontsを複数活用する方法：初心者でも簡単に使いこなせるガイド（２） | 福岡LP(ランディングページ）ホームページ制作

1. Google Fontsのウェブサイトからフォントを選ぶ

Google Fonts にアクセスします。
使用したいフォントを検索し、選択します。
必要に応じて異なるフォントスタイルやウェイトを追加します。

2. フォントを埋め込むコードを取得

選択したフォントの右上にある「Embed」タブをクリックし、フォント埋め込み用のコードをコピーします。

例として、以下のフォントを使うとします：

Roboto
Lora

コピーするコードは次のようになります：

htmlコードをコピーする<link href="https://fonts.googleapis.com/css2?family=Lora&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

3. HTMLにリンクを追加

HTMLの <head> タグ内に上記のリンクタグを貼り付けます。

htmlコードをコピーする<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts Example</title>
    <link href="https://fonts.googleapis.com/css2?family=Lora&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <h1 style="font-family: 'Roboto', sans-serif;">This is Roboto</h1>
    <p style="font-family: 'Lora', serif;">This is Lora</p>
</body>
</html>

4. CSSでフォントを適用

外部CSSを使用している場合、フォントファミリーをCSSファイル内で指定します。

cssコードをコピーする/* styles.css */
body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Lora', serif;
}

ポイント

複数フォントを組み合わせる場合の優先順位を設定
フォントが表示されない場合に備え、フォントファミリーの後に汎用ファミリー（例: sans-serif, serif）を指定します。
フォントのウェイトを指定
Google Fontsの埋め込みリンクで指定したウェイト（太さ）に合わせてCSSで指定します。

cssコードをコピーするp {
    font-weight: 700; /* 太字（Bold） */
}

これで複数のGoogleフォントを問題なく使用できます！