Tmaeda13web

DesginCodingOperationsThrive

Google Fonts の使い方🗒

by tmaeda13web

Google Fontsを使うと、無料のウェブフォントを簡単にウェブサイトに組み込むことができます。
以下の手順でGoogle Fontsを使用する方法を説明します。

Google Fontsの使用方法

1. フォントの選択

  1. Google Fonts にアクセスします。
  2. フォント一覧から使用したいフォントを検索し、選択します。

2. フォントスタイルの選択

  1. フォントの詳細ページ で、フォントのスタイル（ウェイト、スタイルなど）を選択します。
  2. 右上の「Select this style」ボタンをクリックします。選択したスタイルが右側の「Selected family」に追加されます。

3. フォント埋め込みコードを取得

  1. 右側の「Selected family」 で「Embed」タブをクリックします。
  2. 「LINK」 または 「@IMPORT」 のコードが表示されます。これをHTMLまたはCSSにコピーして使用します。

4. HTMLまたはCSSにフォントを追加

HTMLに<link>タグを追加:

<head>セクションに埋め込みコードを追加します。

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

CSSにフォントを適用:

CSSファイルまたは<style>タグにフォントを適用するスタイルを追加します。

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

5. サンプルコード

以下にGoogle Fontsを使ったサンプルHTMLコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts Sample</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Google Fontsを使用したサンプル</h1>
    <p>これはGoogle Fontsから読み込んだフォントを使ったサンプルです。</p>
</body>
</html>

詳細なガイド

まとめ

  • 選択: Google Fontsのサイトから使用したいフォントを選び、スタイルを選択します。
  • 埋め込みコード取得: linkタグや@importのコードを取得し、HTMLまたはCSSに追加します。
  • フォント適用: CSSでfont-familyを設定し、フォントを適用します。

注意点

  • フォント読み込み時間: 外部からフォントを読み込むため、ページの読み込み時間に影響を与える可能性があります。できるだけ軽量なフォントを選び、display=swapを使ってフォントの表示遅延を最小化します。
  • フォールバックフォント: フォントが読み込めなかった場合に備えて、フォールバックフォントを指定しておきます（例: sans-serif）。

この手順に従うことで、Google Fontsを簡単にウェブサイトに組み込むことができます。フォントの選定により、ウェブサイトのデザインや可読性を大幅に向上させることができます。

Recent posts
Archive
Category