3分でできる! Googleフォント＆アイコンの導入方法と使い方を解説

｜ 25747 PV ｜ 2024.10.09

favorite_border

【SkillhubAIリリース記念無料キャンペーン、限定100名】 Skillhubが生まれ変わりました！AIを使った最先端の学習環境を使って無料から学習できます。
» 今すぐキャンペーンをチェックする

Webサイトの雰囲気作りや読みやすさ向上に、おしゃれなフォントを使いたい！アイコンを使ってもっと分かりやすい表示にしたい！

そんな時に役立つのが、Googleが提供しているサービスのGoogle FontsとMaterial Icons。洗練されたフォントやアイコンが無料で使用でき、日本語対応書体も豊富なことから人気のサービスです。

Google Fontsは導入も簡単。
説明が少ないので最初は少し戸惑うかもしれませんが、一度使えばサクっと使いたいWebフォントやアイコンを設定できます。
サイトの使い方と導入方法を見ていきましょう！

Google Fontsとは

Webフォントとは？
Google Fontsにはアイコンフォントもある

CDNでのGoogle Fonts導入方法

1.使いたいフォントを選ぶ
2.CDNコードを取得・適用

Googleアイコンの導入方法

Google Material Icons（マテリアルアイコン）の導入方法
Google Material Symbols（マテリアルシンボル）の使い方

Google Fontsとは

Google fontsは、Google社が提供しているWebフォントサービス。
商用利用可能、完全無料でWebフォントを使用できることから多くのWebサイトで導入されています。

https://fonts.google.com/

GoogleFontsは、CDN、ダウンロード版の両方が使えるのも嬉しいポイント。
Googleが提供しているサービスだけに、CDNの方も安定感や信頼度が高いです。

今回の記事では、CDNを使ったGoogle Fonts、Google Fonts Iconsの導入方法を紹介します。

Webフォントとは？

Webフォントサービスとは、Webサーバー上にあるフォントを読み込んで表示させるサービスのことです。

通常のフォント指定（デバイスフォントの指定）では、フォント指定をしてもユーザーの端末にインストールされていないと表示できません。
表示できるフォントに置き換えられて、表示されます。

MacとWindowsでサイトの見え方、文字が違うのもこのため。

Webフォントの場合は、サーバー上にあるフォントデータを全員に読み込んでもらいます。こうすると、ユーザーの端末にインストールされていないフォントも表示できます。
OS・端末差なく、デザイン通りのWebページを見せることができるのです。

Google Fontsにはアイコンフォントもある

Google Fontsでは“Material Icons”という、マテリアルデザインに合わせて作られたアイコンフォントも用意されています。人によって「Google Fonts Icons」や「Google Material Icons」と呼び方が違いますが、どちらも同じサービスを指しています。

https://fonts.google.com/icons

アイコンフォントとは、テキスト（文字列）としてアイコンを表示する方法。
画像ではなく文字として扱かわれるため、CSSを使ってサイズや色を変更することができます。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

CDNでのGoogle Fonts導入方法

Google Fontsを使えるように設定してみましょう。
日本語対応フォントとして人気の高い、Noto Sans Japaneseを使用してみます。

1.使いたいフォントを選ぶ

https://fonts.google.com/を開いてください。

Noto Sans Japaneseをクリックして開きます。
見つけられない方は、検索（Search fonts）を使ってください。

ページをスクロールダウンしていくと、Stylesという項目があります。
ここでは、使用したい文字の太さを決めることができます。
今回は「Regular 400」「Bold 700」の２つをSelect this styleで追加してみます。

2.CDNコードを取得・適用

使用したいフォントのstyleを追加できたら、画面右上に表示されているパネルのようなアイコン（View your selected families）をクリック。

Selected familyというパネルが開きます。
使用するフォントスタイルがあれば、下の方に導入のためのコードが表示されます。

赤線で囲ったlinkタグの部分をコピーします。
指示通りhmlファイルのhead内に貼り付けましょう。

【例】

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!-- google fonts & icon -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <!-- 確認用コード  -->
  <h1>
    CDN,CSS確認
  </h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <a href="https://skillhub.jp/">リンク</a>
  <p>段落</p>
  <b>太字</b>
  <i>Italic</i>
  <em>強調</em>
  <ul>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
  </ul>
  <ol>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
  </ol>
</body>

緑の線で囲った、font-familyの指定もコピー。
こちらはcssファイルで、フォントを指定したい箇所をセレクタにして貼り付けます。ページ全体に適用する場合は、以下のようにbodyに指定すると良いでしょう。

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

ブラウザで表示を確認してみましょう。
検証ツールでbodyのフォント指定をOFFにしてみると、Google Fontsが使われているか分かりやすいです。

Googleアイコンの導入方法

次に、Googleのアイコン表示させてみましょう。
Google Fonts系列サービスから利用できるアイコンには、２つの種類があります。

Google Material Icons（マテリアルアイコン）
Google Material Symbols（マテリアルシンボル）

Google Material Icons（マテリアルアイコン）の導入方法

Material Iconsは従来のアイコンセットで、現在でも広く使われています。
シンプルで一貫性のあるスタイルが特徴です。このアイコンセットはWebサイトやアプリでの使用に最適で、視認性や読みやすさを重視しています。5つのスタイルオプション（filled、outlined、rounded、sharp、two-tone）があり、それぞれが独立したアイコンセットとして扱われています。

まず、CDNコードを貼り付けます

Google Fontsのガイド Setup Method 1. Using via Google Fonts によると、こちらもCDNでCSSファイルを読み込む必要があります。

掲載されているCDNのコードをhtmlファイル、head内に貼り付けましょう。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

使いたいアイコンのコードをコピー

https://fonts.google.com/icons?icon.set=Material+Iconsで、アイコンを探してみましょう。

最初に、左側のStylesが「Material Icons」になっていることを確認してください。

一覧表示されている中から、使いたいアイコンを探します。

下図は、videoで検索した場合です。
モニターの中に再生マークがあるアイコン（Ondemand Video）を使ってみます。

使用したいアイコンをクリック。
パネルが開いて、アイコンを表示させるためのコードが出てきます。
赤線で囲った部分をコピーして、htmlファイルに貼り付けてください。

　　↓

<span class="material-icons-outlined">
ondemand_video
</span>

表示を確認してみましょう。

アイコンが表示されていませんね。
ondemand_videoと、文字が表示されてしまいました。

Googleアイコンが表示されない?!

上図のような「Googleアイコンが表示されない」というお問い合わせ、実は結構あります。

冒頭で紹介したように、Googleアイコンは5つのスタイルに分けられています。
CDNでCSSを読み込ませる際に、使用したいスタイルを読み込む設定を行っていないとGoogle マテリアルアイコンは表示されません。

デフォルト（Material+Icons）は“Filled”を使う設定です。
選択したアイコンのスタイル“Outlined”が使えるように変更しましょう。
Iconsの後に+スタイル名をつけます。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

上書き保存して、ブラウザをリロードするとアイコンが表示されます。

GoogleアイコンのスタイルとCSS記述

Google Fonts Iconsで使用するスタイルは下記のようになっています。
アイコンが表示されないときは、正しいスタイルシートを指定できているか確認してみましょう。

スタイル名	linkタグでの指定	CSSクラス
Filled	Material+Icons	material-icons
Outlined	Material+Icons+Outlined	material-icons-outlined
Rounded	Material+Icons+Round	material-icons-round
Sharp	Material+Icons+Sharp	material-icons-sharp
Two tone	Material+Icons+Two+Tone	material-icons-two-tone

FilledとOutlinedの両方を使いたい！という場合は、パイプ（|）で区切ることで複数スタイルを使用することもできます。

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

極論、全部のスタイルを読み込ませてしまえばアイコン使い放題です。
が、全アイコンのデータを読み込むとページ表示が遅くなる可能性があります。必要なスタイルだけ追加するのがオススメです。

Google Material Symbols（マテリアルシンボル）の使い方

Google Material Symbolsは2022年に導入された新しいアイコンシステムで、より高度なカスタマイズが可能なことがウリ。StylesのところでMaterial Iconsに「deprecated（非推奨）」とつけられていたように、GoogleはGoogle Material Symbolsの使用を推奨しています。

Google Fontsでアイコンを探して使う

https://fonts.google.com/iconsでアイコンを探します。
今度はStylesで「Material Symbols」を選択してください。

左上、Customizeではアイコンが塗りつぶしタイプか線か、線ならどのくらいの太さか、などを調整できます。

使いたいアイコンをクリックしてみましょう。
右側にパネルが表示されます。

まず、一番上にあるブロックの「Copy code」を使ってlinkタグをコピーしてください。

自分のファイルのhead内に貼り付けます。

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=favorite" />
    ⋮
</head>

次に、右のパネルを下方向にスクロールして「Inserting the icon」の項目を探します。
spanタグのコードがあるので、こちらをコピー。
使いたい場所に貼り付けます。

<span class="material-symbols-outlined">
    favorite
</span>

ブラウザで表示すると、アイコンが表示されることが確認できます。
（下図、左上の♡アイコン）

複数使いたい時は？

先ほど貼り付けたlinkタグは、末尾が「icon_names=favorite」。
ここに使用したいアイコンの名前が入るわけです。

別のアイコンも使用したい場合は、この後ろに半角カンマ( , )+Icon nameを追加します。
例えば、星アイコンだと以下のコードです。

    ⋮
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=favorite,star" />
</head>

<body>
  <span class="material-symbols-outlined">
    star
  </span>
  <span class="material-symbols-outlined">
    favorite
  </span>