GoogleFontsの使い方

Google Fontsを使用する方法は大きく分けて2つあります。以下にそれぞれの方法を簡潔に説明します。

方法1: HTMLにリンクを挿入する方法

  1. Google Fontsのウェブサイトにアクセスし、使用したいフォントを選択します。
  2. 「Embed」タブでリンクタグを取得します。 例:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  1. HTMLの<head>セクションにリンクタグを挿入します。 例:
   <!DOCTYPE html>
   <html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Studio Emu</title>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
       <link rel="stylesheet" href="./assets/scss/main.css">
   </head>
   <body>
       <header></header>
       <main>
           <div class="your-class">test</div>
       </main>
       <footer></footer>
   </body>
   </html>
  1. CSSでフォントファミリーを指定します。 例:
   body {
       font-family: 'Roboto', sans-serif;
   }

方法2: CSSで@importを使用する方法

  1. Google Fontsのウェブサイトにアクセスし、使用したいフォントを選択します。
  2. 「Embed」タブで@importのコードを取得します。 例:
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
  1. CSSファイルの先頭に@importを追加します。 例:
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

   body {
       font-family: 'Roboto', sans-serif;
   }

まとめ

  • 方法1 (リンクを挿入):
  1. Google Fontsのリンクを取得してHTMLの<head>セクションに挿入する。
  2. CSSでフォントファミリーを指定する。
  • 方法2 (CSSで@importを使用):
  1. Google Fontsの@importコードを取得する。
  2. CSSファイルの先頭に@importを追加する。
  3. CSSでフォントファミリーを指定する。

どちらの方法も、Google Fontsのフォントを簡単にウェブサイトに適用するための基本的な手順です。