3分でできる! Googleフォント＆アイコンの導入方法と使い方を解説
Webサイトの雰囲気作りや読みやすさ向上に、おしゃれなフォントを使いたい！アイコンを使ってもっと分かりやすい表示にしたい！
そんな時に役立つのが、Googleが提供しているサービスのGoogle FontsとMaterial Icons。洗練されたフォントやアイコンが無料で使用でき、日本語対応書体も豊富なことから人気のサービスです。
Google Fontsは導入も簡単。
説明が少ないので最初は少し戸惑うかもしれませんが、一度使えばサクっと使いたいWebフォントやアイコンを設定できます。
サイトの使い方と導入方法を見ていきましょう！
Google Fontsとは
Google fontsは、Google社が提供しているWebフォントサービス。
商用利用可能、完全無料でWebフォントを使用できることから多くのWebサイトで導入されています。
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を使ってサイズや色を変更することができます。
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 Fonts Icons導入方法
次にアイコンフォントのGoogle Fonts Iconsを導入します。
CDNの読み込み
Google Fontsのガイド Setup Method 1. Using via Google Fonts によると、こちらもCDNでCSSファイルを読み込むと使えるようです。
コードをhtmlファイル、head内に貼り付けます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
使いたいアイコンのコードをコピー
https://fonts.google.com/iconsで、アイコンを探してみましょう。
検索ボックスにvideoと入れてみました。
モニターの中に再生マークがあるアイコンを使ってみます。
使用したいアイコンをクリック。
パネルが開いて、アイコンを表示させるためのコードが出てきます。
赤線で囲った部分をコピーして、htmlファイルに貼り付けてください。
↓
<span class="material-icons-outlined">
ondemand_video
</span>
表示を確認してみましょう。
まだアイコンは表示されません。
ondemand_videoと、文字が表示されているはずです。
Googleアイコンが表示されない?!
上図のように「設定したのにGoogleアイコンが表示されない」ということ、実は結構あります。
実は、Googleアイコンは5つのスタイルに分けられています。
CSS読み込み時に、それぞれに適した設定を行わないと、Google Fontsアイコンは表示されません。
デフォルト（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">
極論、全部のスタイルを読み込ませてしまえばアイコン使い放題です。
が、全アイコンのデータを読み込むとページ表示が遅くなる可能性があります。必要なスタイルだけ追加するのがオススメです。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月21日まで