Google Fontsを複数活用する方法:初心者でも簡単に使いこなせるガイド(1) | 【福岡】LP・ランディングページ・ホームページ制作|セルピー

Google Fontsを複数活用する方法:初心者でも簡単に使いこなせるガイド(1)

Google Fontsを複数使う方法は簡単です。CSSで複数のフォントファミリーを指定できます。以下の手順で実装できます。

1. 必要なフォントを選ぶ

Google Fontsのサイト(https://fonts.google.com/)で使用したいフォントを選びます。

2. フォントリンクをHTMLに追加

Google Fontsで選んだフォントのリンクを、HTMLの<head>内に追加します。例えば、RobotoOpen Sansのフォントを使う場合:

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

3. CSSでフォントを指定

その後、CSSで複数のフォントを使いたい場所に指定します。font-familyプロパティで複数のフォントをカンマ区切りで列挙します。以下の例では、Robotoを最初に指定し、次にOpen Sansを指定しています。

cssコードをコピーするbody {
  font-family: 'Roboto', 'Open Sans', sans-serif;
}

こうすることで、Robotoフォントが使用できない場合はOpen Sansが、さらに使用できない場合はデフォルトのsans-serifフォントが使われます。

まとめ

  1. Google Fontsでフォントを選び、リンクをHTMLに追加。
  2. CSSでfont-familyを使ってフォントを指定。複数のフォントをカンマで区切って記述。

これで複数のGoogleフォントを簡単に使うことができます。