Google Fontsを複数使う方法は簡単です。CSSで複数のフォントファミリーを指定できます。以下の手順で実装できます。
1. 必要なフォントを選ぶ
Google Fontsのサイト(https://fonts.google.com/)で使用したいフォントを選びます。
2. フォントリンクをHTMLに追加
Google Fontsで選んだフォントのリンクを、HTMLの<head>
内に追加します。例えば、Roboto
とOpen 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
フォントが使われます。
まとめ
- Google Fontsでフォントを選び、リンクをHTMLに追加。
- CSSで
font-family
を使ってフォントを指定。複数のフォントをカンマで区切って記述。
これで複数のGoogleフォントを簡単に使うことができます。