先生と生徒の会話形式で理解しよう

生徒

「先生、ホームページの文字の雰囲気をオシャレに変えたいです！何か方法ありますか？」

先生

「いいですね！そういう時は、Google Fonts（グーグルフォント）を使ってCSSでフォントを変更する方法がありますよ。」

生徒

「Google Fontsってなんですか？難しそう…」

先生

「大丈夫！とても簡単に使える無料のフォントサービスなんですよ。今からわかりやすく説明していきますね。」

1. Google Fontsとは何か？

Google Fonts（グーグルフォント）は、Googleが提供している無料で使える文字のデザイン（フォント）の集まりです。Webサイトやブログなどで使われていて、世界中で多くの人に使われています。

普通の文字は、パソコンやスマホに元々入っているフォントしか使えませんが、Google Fontsを使うと、特別なフォントをCSSで読み込んで表示できるようになります。

2. なぜCSSでGoogle Fontsを使うのか？

CSS（スタイルシート）を使うと、文字の見た目やデザインを自由に変更できます。特にフォントを変えると、ページ全体の印象がガラッと変わります。Google Fontsを使えば、おしゃれ・かわいい・かっこいいフォントがすぐに使えます。

たとえば、手書き風のフォントや英語のロゴっぽいフォントなど、用途に合わせて選べます。

3. Google Fontsを使う手順を解説

ここでは、Google Fontsの中でも人気が高い「Roboto（ロボト）」というフォントを使う方法を紹介します。

やることはとてもシンプルで、たったの2ステップです。

Google FontsのフォントをHTMLで読み込む
CSSで文字にそのフォントを指定する

4. Google Fontsの読み込み方

まず、HTMLのタグの中に、Google Fontsの読み込みタグを入れます。これはGoogle Fontsの公式サイトからコピーできます。


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

これを使うことで、「Roboto」というフォントが使えるようになります。

5. CSSでGoogle Fontsを文字に適用する方法

次に、CSSを使って実際に文字にフォントを適用します。ここでは、<h1>と<p>タグに指定してみます。


<style>
h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}
</style>

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

<h1>Google Fontsで文字が変わる！</h1>
<p>これはRobotoフォントで表示された段落です。</p>

ブラウザ表示

これで、ページ上の文字がRobotoフォントで表示されるようになります。

6. Google Fontsで他のフォントも使ってみよう

Roboto以外にも、いろいろなフォントがあります。例えば、手書き風の「Mochiy Pop One」や、丸みのある「M PLUS Rounded 1c」など。

以下は「Mochiy Pop One」を使う例です。


<style>
h1 {
    font-family: 'Mochiy Pop One', sans-serif;
    font-size: 32px;
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap" rel="stylesheet">

<h1>手書き風のかわいい文字！</h1>

ブラウザ表示

フォント名を変えるだけで、まったく違うデザインになります。

7. フォントを指定するCSSプロパティとは？

CSSでフォントを指定するには、font-family（フォント・ファミリー）というプロパティを使います。これは「この文字にはこのフォントを使ってね」と伝える命令です。

たとえば、次のように書くことで、指定したフォントが使われます。


font-family: 'Roboto', sans-serif;

このとき、2つ目の「sans-serif」は予備のフォントで、最初のRobotoが使えなかった場合の保険として表示されます。

8. Google Fontsを使うときの注意点

Google Fontsを使うには、インターネットに接続されている必要があります。なぜなら、Google Fontsはインターネットからフォントを読み込む仕組みだからです。

また、フォントをたくさん使いすぎると、ページの読み込みが遅くなることがあります。必要なフォントだけを選ぶようにしましょう。

9. スマホでもGoogle Fontsは使えるの？

はい、もちろん使えます。スマートフォンでも、Google FontsをCSSで設定していれば自動的に表示されます。パソコンと同じようにフォントが変わるので、スマホユーザーにも見やすくデザインできます。

10. 日本語に対応しているGoogle Fontsの探し方

Google Fontsには、英語だけでなく日本語に対応したフォントもたくさんあります。

Google Fontsの公式ページに行き、「Language（言語）」の中から「Japanese（日本語）」を選べば、日本語フォントが表示されます。

たとえば、「Noto Sans JP」「M PLUS Rounded 1c」「Kosugi Maru」などが日本語対応フォントです。

まとめ

この記事では、CSSでGoogle Fontsを活用しながらWebページの文字デザインを自由に変更する方法について、基礎から応用までを詳しく学びました。ふだんのWeb制作では、端末にもともと入っているフォントを使うことが一般的ですが、Google Fontsを使うと豊富な種類の書体から好きなデザインを選んで利用できるため、ページ全体の印象を大きく変えることができます。とくに、手書き風のかわいらしいフォントや、スタイリッシュな英字フォント、日本語に最適化された読みやすいフォントなど、目的に合わせて選べる選択肢が多いことが大きな魅力です。 Google Fontsは、リンクタグで読み込み、CSSでfont-familyを指定するだけのシンプルな仕組みです。読み込みに使用するリンクタグは公式サイトからコピーするだけでよく、使い方も直感的で覚えやすいので、初心者でもすぐに活用できます。また、フォントファミリーの指定では、第一候補としてGoogle Fontsのフォント名を指定し、その後の予備として標準のフォントを指定することで、読み込みエラー時にも表示が乱れにくくなります。 Webページのデザインでは、文字の印象が非常に重要であり、フォントを変えるだけで雰囲気が大きく変わることがあります。記事のタイトルや見出しに太めのフォントを使うことで強い存在感を持たせたり、本文には読みやすく目に優しいフォントを使うことでストレスのない閲覧体験を提供できます。Google Fontsを使えば、こうした文字の使い分けも気軽に行えるため、デザインの幅が広がります。また、日本語フォントも多く用意されており、Noto Sans JP、M PLUS Rounded 1c、Kosugi Maruなど、読みやすく安定した書体がたくさんあります。日本語フォントはデータ量が大きいため、読み込み速度に少し影響する場合がありますが、必要なウエイトだけを選ぶことで無駄を省く工夫も可能です。実際の制作では、フォントの読み込み速度とデザイン性のバランスを考えながら選択することが大切です。 Google Fontsはパソコンだけでなくスマートフォンやタブレットにも対応しているため、どのデバイスでも同じフォントが表示されます。これは、Webデザインにおいて統一感を保つうえで非常に有効です。また、CSSではfont-sizeやfont-weight、line-heightなどと組み合わせることで、フォントを生かした美しいレイアウトを作ることができます。文字間隔を調整するletter-spacingや行間を調節するline-heightなどを使うと、より洗練された文章の見た目を作れます。下記のサンプルコードでは、Google Fontsを読み込んでCSSで文字のデザインを指定する流れをまとめています。見出しや本文で異なるフォントを使ったり、特定のクラスだけ別のフォントを割り当てるなど、実際の制作に応用しながら理解を深めていきましょう。

Google Fontsを使ったまとめ用デザインサンプル


<style>
h1.sample-title {
    font-family: 'Roboto', sans-serif;
    font-size: 34px;
    letter-spacing: 2px;
}

p.sample-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    line-height: 1.8;
}

p.sample-emphasis {
    font-family: 'Mochiy Pop One', sans-serif;
    font-size: 20px;
    color: #d9534f;
}
</style>

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

<h1 class="sample-title">Google Fontsで雰囲気が変わる見出しの例</h1>
<p class="sample-text">この段落はNoto Sans JPで設定されており、読みやすさを重視した文章に適しています。</p>
<p class="sample-emphasis">この文章はMochiy Pop Oneで強調し、親しみやすい印象を与えています。</p>

ブラウザ表示

先生と生徒の振り返り会話

生徒「Google Fontsって思っていたよりも簡単に使えるんですね。リンクタグを貼ってfont-familyを指定するだけで、ページ全体の雰囲気がこんなに変わるのは驚きました。」

先生「そうでしょう。フォントはデザインの基本でありながら、手軽に変えられるので、まず最初に取り組むと効果の大きい部分なんですよ。」

生徒「日本語のフォントもたくさんあるのがうれしいです。特にNoto Sans JPは読みやすいので、本文に使うのにぴったりですね。」

先生「そのとおりです。日本語フォントは情報量が多いので選ぶ際には注意が必要ですが、適切に選べばとても美しい文章を作ることができます。」

生徒「Google Fontsの読み込みがインターネット経由だという点も理解できました。読み込み速度が遅くならないように、必要なフォントだけ選ぶのが大事なんですね。」

先生「そうですね。たくさん使えるからといって欲張って読み込むと、ページが重くなることがありますから、適切な量に絞るのがポイントです。」

生徒「見出しだけ違うフォントにしたり、強調部分を手書き風にしたり、使い分ける工夫でデザインがもっと楽しくなりそうです！」

先生「まさにその工夫が大切です。フォントの特徴を理解して適材適所で使い分けることで、読みやすく美しいページを作れるようになりますよ。」

生徒「今回のサンプルコードもとても参考になりました。自分のサイトでも実際に試してみて、いろいろなフォントを比較してみようと思います。」

先生「ぜひ実践してみてください。フォントは文章の印象を変えるだけでなく、読者の感情にも影響を与えるので、試しながら自分の好みを見つけていくのがおすすめですよ。」