CSS

Webフォントの使い方をマスター！Google Fontsで実践的に学ぶ

Webサイトのフォントを変更すると、ページの印象を大きく変えることができます。

例えば、ゴシック体のフォントならカジュアルな雰囲気、明朝体なら落ち着いた印象になります。

しかし、パソコンやスマホには使えるフォントが限られているため、好きなフォントを自由に使えないことがあります。

そんなときに便利なのが「Webフォント」です。

この記事では、Google Fonts を使ってWebフォントを設定する方法を、初心者向けに分かりやすく解説します！

Webフォントとは？

通常のフォントは、パソコンやスマホに最初から入っているものしか使えません。

しかし、Webフォントを使うと、サーバー上にあるフォントをインターネット経由で読み込んで、自由にフォントを変更できます。

Webフォントを使うメリット

  • ユーザーのデバイスに依存せず、好きなフォントを使える
  • サイトのデザインを統一しやすくなる
  • 手軽におしゃれなフォントを適用できる

Google Fontsとは？

Google Fontsは、Google が提供する無料のWebフォントサービスです。

多くのデザインに合うフォントが用意されており、誰でも簡単に使うことができます。

Google Fontsの特徴

  • 無料で利用できる
  • インストール不要で簡単に使える
  • 日本語フォントや英字フォントが豊富

Google Fontsを使ってみよう！

実際にGoogle Fontsを使って、サイトのフォントを変更してみましょう。

ステップ1：Google Fontsでフォントを選ぶ

まず、以下のリンクから Google Fonts のサイトを開きます。

▶ Google Fonts

一覧の中から好きなフォントを選びましょう。

ここでは、読みやすくて人気のある「Noto Sans JP」を使います。

ステップ2：フォントのリンクを取得

フォントを選んだら、「Select this style（このスタイルを選択）」をクリックします。

次に、「Embed（埋め込み）」タブを開くと、次のようなコードが表示されます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

このコードをコピーして、index.html の <head> 内に貼り付けましょう。

ステップ3：CSSでフォントを適用

次に、CSSファイルでフォントを適用します。

フォントの指定は、次のように font-family を使います。

body {
font-family: 'Noto Sans JP', sans-serif;
}

実際に試してみよう！

次の手順でフォントを適用しましょう。

1. HTMLファイルを作成（index.html）

以下のコードをコピーして、index.html として保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Fontsを試そう</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Google Fonts を使ってみよう！</h1>
<p>この文章はWebフォント「Noto Sans JP」で表示されています。</p>
</body>
</html>

2. CSSファイルを作成（style.css）

次に、CSSのコードを style.css に保存しましょう。

body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #333;
}

3. ファイルの保存場所

HTML と CSS ファイルは、同じフォルダに保存してください。

フォルダ構成の例：

my-website/
│── index.html
│── style.css

4. ブラウザで開く

作成した index.html をブラウザで開くと、フォントが適用されていることが確認できます。

フォントを変えて、いろいろ試してみましょう！

問題集

Q1. Webフォントを使うメリットはどれ？

  1. ユーザーがフォントを自由に変更できる
  2. どんなデバイスでも同じフォントを適用できる
  3. サイトの読み込み速度が速くなる

Q2. Google Fonts をHTMLで使うとき、どこにコードを追加する？

  1. <body> の中
  2. <head> の中
  3. <footer> の中

Q3. フォントを変更するためのCSSのプロパティは？

  1. text-align
  2. font-size
  3. font-family

✅ 答え: Q1→2, Q2→2, Q3→3

まとめ

  • Webフォントを使うと、ユーザーの環境に関係なく好きなフォントを適用できる
  • Google Fonts を使うと、簡単にWebフォントを設定できる
  • font-family を使ってフォントを適用する
  • HTMLとCSSは同じフォルダに保存する

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。