情報活用編プラス
第4章「ネットワークと情報セキュリティ」
IP03-06
ネットワークで広がるWebページ
3. Google Fontsって何？ ( 3 / 11 )
学習の目的
1. Google Fontsとは
2. Google Fontsを確認しよう
3. Google Fontsの使い方
そういえば、パソコンって もともといろんなフォントが入ってるよね。
Wordとかでフォントを選べるし。
うんうん。明朝体とかゴシック体とか、たくさんあるよね。
フォントって最初から入ってるものだと思ってた。
その通りです。 パソコンやスマートフォンには、 最初から使えるフォントがいくつか入っています。
ここで大切なことは、かっこいいフォントを使おうと思っても、パソコンなどに入っていないフォントはそのままでは表示されず、使っている端末に入っているフォントに置き換えて表示されます。
えっ！パソコンによって入っているフォントも違うよね？
見る人の環境で、文字の見た目が変わっちゃいそう…。
そうなのです。自分のパソコンと他の人のパソコンでは見え方が違うということもあります。
それじゃ、せっかくかっこよくしても意味がないじゃん。
実はその問題を解決するために、 Webページ専用のフォントの仕組みが用意されています。
代表的なWebフォントサービスであるGoogle Fonts(グーグル フォンツ)について学習しましょう！
Google Fontsとは、 Googleが提供しているWebページ専用のフォントサービスです。
Webページを表示するときに、 インターネット上にあるフォントのデータを読み込んで表示します。
そのため、見る人のパソコンやスマートフォンにフォントが入っていなくても、同じフォントで表示することができます。
次の例は、GoogleFontsを使っていない例と使った例です。
せっかくフォントを指定しても、そのフォントがなければ「標準のフォント」で表示されます。
フォントはない場合(標準のフォント)
Webフォントを使ってみよう！
Google Fontsを指定
Webフォントを使ってみよう！
えっ、こんなに雰囲気が変わるんだ！
同じ文章なのに、全然ちがって見えるね。
フォントが違うだけで、 Webページっぽさが一気に出る気がする。
その通りです。
Google Fontsを使うと、 見る人の環境に関係なく、同じフォントを表示できます。
Google Fontsを使うとできること
Google Fontsは、Webページで利用できるフォントを無料で提供しているサービスです。
とても多くのフォントが登録されており、自分のWebページの雰囲気に合わせて選ぶことができます。
Google FontsのWebページを開いてどのようなフォントがあるか見てみましょう。
うわっ、フォントがずらっと並んでる…。
こんなにたくさんあるんだ！
スクロールしても全然終わらないね。
どうやって探せばいいんだろう？
そうですね。 Google Fontsには、 1,000種類以上のフォントが登録されています。
そのため、条件を指定して フォントを絞り込む仕組みが用意されています。
絞り込む仕組みをフィルターと呼びます。
Webページの「Filters」を押すと絞り込むためのメニューが表示されます。
画面の左側には、フォントを探すための フィルタがあります。
「Language」で「Japanese」を選ぶと、 日本語フォントだけになるんだね！
英語フォントと日本語フォントが ちゃんと分かれているのは助かるなあ。
その通りです。 Webページで日本語を使う場合は、 日本語対応フォントを選ぶことがとても大切です。
また、Google Fontsはどのようなときに向いているフォントなのか、カテゴリー別でオススメもされています。
具体的にどのように分かれているか、下記の「Google Fontsのカテゴリの説明」を開いて確認しましょう。
カテゴリは、何を表すのか場面ごとにまとめられています。
下記は、カテゴリの抜粋です。
| カテゴリ名 | 説明 | 使用例 |
|---|---|---|
| Feeling(感情) | 感情や雰囲気を表すフォントが集まっています。 |
Playfulフォント 
|
| Appearance(外観) | 視覚的に特徴があるフォントが集まっています。 |
Technoフォント 
|
| Caligraphy(カリグラフィー) | 文字を美しく装飾したフォントが集まっています。 |
Handwrittenフォント 
|
| Serif(セリフ) | 明朝体のフォントが集まっています。 |
Modern 
|
| Sans Serif(サンセリフ) | ゴシック体のフォントが集まっています。 |
Geometric 
|
| Seasonal(季節) | 季節ごとのイベントに合ったフォントが集まっています。 |
Christmax 
|
Google Fonts を使うときは、 フォントのデータを自分のパソコンに保存するのではありません。
Webページを表示するときに、 Google Fonts のサーバからフォントを読み込む仕組みになっています。
えっ？ フォントってダウンロードしなくていいの？
はい。 Google Fonts では、 フォントを置いているサーバにアクセスして使う という方法をとっています。
まず、Google Fonts のページで使いたいフォントを選びます。
フォントの詳細ページを開くと、 Webページに追加するための link タグが表示されます。
Google Fonts の link タグ（例）
<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=Dela+Gothic+One&display=swap" rel="stylesheet">
link タグって、 CSSファイルを読み込むときにも使ったよね？
いいところに気づきました！
この link タグは、「 Google のサーバにあるフォント用CSSを読み込む 」という意味なんです。
次に、CSS でそのフォントを指定します。
CSS でフォントを指定する例
body {
font-family: 'Dela Gothic One', sans-serif;
}これで、 見る人のパソコンにフォントが入ってなくても 同じ見た目になるんだね！
その通りです。
Webページを開くとき、 HTML・CSS・画像・フォントなどのデータが それぞれネットワークを通して取得されています。
Google Fonts は、 ネットワーク上の別のサーバのフォントデータを利用する とても良い例なんです。
ここがネットワークのポイント
次は、実際にフォントを切り替えて、 Webページの見た目がどう変わるか試してみましょう。
