Googleフォントを追加する方法

2024-02-08 03:14 Googleフォント ウェブデザイン CSS

  1. Googleフォントの選択: まず、使用したいGoogleフォントを選択します。Google Fontsのウェブサイト（https://fonts.google.com/）を訪れ、豊富なフォントコレクションからお気に入りのフォントを見つけましょう。

  2. フォントの埋め込み: 選択したフォントをウェブページに埋め込むために、以下のコードをセクション内に追加します。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">

上記のコードの "Font+Name" の部分を、実際に使用したいフォントの名前に置き換えてください。複数のフォントを使用する場合は、それぞれのフォント名をカンマで区切って指定します。

  1. フォントの適用: 追加したGoogleフォントを特定の要素に適用するには、CSSを使用します。以下のコードを適用したい要素のスタイル定義内に追加します。
selector {
  font-family: 'Font Name', sans-serif;
}

上記のコードの "selector" の部分は、適用したい要素のCSSセレクタを指定します。また、"Font Name" の部分は、実際に使用したいフォントの名前に置き換えてください。