CSSでWebフォントを使いこなそう！初心者向けGoogle Fontsの使い方

Webフォントの読み込みと使用方法（Google Fonts など）

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

生徒

「Webサイトの文字をおしゃれにしたいんですが、どうすればいいですか？」

先生

「それなら、Webフォントを使う方法がありますよ。特にGoogle Fontsというサービスが人気です。」

生徒

「それって難しそうですが、どうやって使うんですか？」

先生

「安心してください！とっても簡単ですよ。一緒にWebフォントの基本を学んでいきましょう。」

1. Webフォントってなに？

Webフォントとは、インターネット上にあるフォント（文字のデザイン）を使ってWebページをデザインできる仕組みのことです。たとえば、いつも見ている文字は「ゴシック体」や「明朝体」といったフォントですが、Webフォントを使えば、もっと個性的でおしゃれな文字に変えることができます。

Webフォントを使うことで、パソコンやスマートフォンに特定のフォントが入っていなくても、同じデザインの文字を表示することができます。これにより、どの端末でも統一された見た目のWebページを作ることができます。

2. Google Fontsとは？

Google Fonts（グーグルフォント）は、Googleが無料で提供しているWebフォントのサービスです。誰でも簡単に使うことができ、たくさんのフォントが用意されています。しかも日本語フォントも対応していて、デザインにこだわりたい方にピッタリです。

使い方もとても簡単で、Webページに少しのコードを追加するだけで、おしゃれなフォントが表示されるようになります。

3. Google Fontsでフォントを選ぶ

まず、Google Fontsのサイトにアクセスします。

Google Fonts 公式サイト

たとえば、「Noto Sans Japanese」という日本語対応の読みやすいフォントを使ってみましょう。

フォントを選んだら、「Select this style（このスタイルを選択）」というボタンをクリックします。すると、表示されているリンクタグをコピーしてHTMLに貼り付けるだけです。

4. Google FontsをHTMLに組み込む方法

Google Fontsの指示に従って、HTMLファイルの<head>タグの中にリンクタグを追加します。


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

その後、CSSのfont-familyというプロパティを使って、指定したフォントを使えるようにします。


<style>
body {
    font-family: 'Noto Sans JP', sans-serif;
}
</style>

<h1>これはWebフォントを使った見出しです</h1>
<p>Google Fontsの「Noto Sans JP」を使っています。</p>

ブラウザ表示

5. CSSでWebフォントを適用するポイント

Webフォントを正しく表示させるためには、CSSでfont-familyをきちんと書くことが重要です。以下の点を守ると安心です。

フォント名は正確に入力する（大文字・小文字も含めて）
日本語フォントは読み込みに時間がかかることがあるので、予備のフォント（フォールバック）も設定する
見出しだけにフォントを使うなど、用途を限定すると読み込みが軽くなる

6. 他のフォントとの組み合わせ例

以下は、複数のWebフォントを組み合わせて使う例です。タイトルは太く、本文は読みやすく設定しています。


<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Roboto&display=swap" rel="stylesheet">
<style>
h1 {
    font-family: 'Noto Serif JP', serif;
}
p {
    font-family: 'Roboto', sans-serif;
}
</style>

<h1>タイトルは和風のセリフ体</h1>
<p>本文は英語向けのスッキリしたフォントで読みやすく。</p>

ブラウザ表示