【Webフォント】Google Fontsの特徴と使い方

ALL プログラミング

Webフォントを使ってWebサイトを制作したい人「そもそも、Webフォントってなに..。普通にcssで設定してたフォントとは何が違うの..。webフォントを使うメリットとデメリットを知りたい!具体的にWeb制作にWebフォントを導入する手順を教えて欲しい。」

この記事を読むことでこのような疑問が解決します。

Webフォントの解説順

  1. Webフォントってなに?
  2. Webフォントのメリット/デメリット
  3. Webフォントの具体的な使い方
  4. まとめ

それではさっそく進めていきましょう!

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

Webサイトに使用されるフォントにはデバイスフォントWebフォントという大きく分けて2種類のフォントがあります。

デバイスフォント・・・WindowsやMacに初期状態で入っているフォントのことで一般にCSSのfont-familyで設定されているフォントはこのデバイスフォントになります。
Webフォント・・・ネットワーク上からフォントデータを取得して適応させるもので、デバイスに関係なく共通のフォントを表示させることが可能。

デバイスに関係なくというところがWebフォントの重要な部分になってきます!
次にメリットとデメリットを解説していきます。

2.Webフォントのメリット/デメリット

Webフォントのメリット

デバイスに関係なく共通のフォントを表示できるという点が最大のメリットです。

デバイスフォントの場合もともとPCに内蔵されているフォントしか表示されないので、自分が作成したWebサイトを他の人のデバイスで表示させたら全然違うフォントで表示されてる…なんてことが起きてしまいます。

せっかくフォントの種類までデザインにこだわって作ったなら、どのデバイスで見ても同じ表示になって欲しいですよね。
そこで、Webフォント(Google Fonts)なんです!!

Webフォントのデメリット

めちゃくちゃ重い。笑

これだけ有能なWebフォント!ちゃんとデメリットもあるんです…。
使用するフォント種類が増えるほど重くなります。特に日本語が絡んでくるフォントのデータがとても大きくて数MB〜数十MBぐらいのサイズが基本になってきます。

とはいえ、Googleの高速サーバーから読み込むことができるので数種類の英語Webフォント使用であれば気にならないし、一度ブラウザで読み込んでしまえばキャッシュに残るので特に気にする必要はなくなります。

結論、Webフォント使いましょう。

3.Webフォントの具体的な使い方

使用手順1.ページにアクセス

まずはこちらからアクセス→「Google Fonts

画面が表示されたらスクロールして使いたいフォントを探します。すでに決まっている場合は上の検索窓(虫めがねマーク)にフォント名を入力して検索します。

使用手順2.使用するフォントを追加してスタイルを選択


sizeのところで文字サイズを変えてどのように表示されるのか見てみたり、スクロールして気に入る文字の太さを探していきます。
画像の場合、2つのスタイルを選択しています。

  • Noto Sans JP・・・Regular 400
  • Noto Sans JP・・・Bold 700

使用手順3.HTMLに読み込む

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

このように先ほど選択したスタイルのコードが用意されているのでコピーして、HTMLのhead内に書き込んだら文字データの読み込みは完了です。

ちなみにCSSで読み込むことも可能です。
@importを選択すると下記のCSS読み込み用のコードが出てくるので同様に書き込んで読み込み完了です。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

HTMLで読み込むかCSSで読み込むかはお好みでどうぞ!
データの読み込みが完了したらfont-familyに読み込んだフォントを設定して終わり!

4.まとめ

  • デバイスに関係なく共通のフォントを表示できる
  • 使用するフォント種類が増えるほど重くなる。特に日本語が重い。
  • サイトアクセス後使いたいフォントが決まったらstyleを選択して追加する
  • linkでHTMLに読み込むか、@importでCSSに読み込む

いかがだったでしょうか?使用しているデバイスごとに表示されるフォントが変わってしまう事故を防げるWebフォント、メリットとデメリットを理解して有効に使ってみてください!

今回の記事が良かったと思っていただけたらTwitterものぞいてみてください!
ブログの更新情報の他にもプログラミング、エンジニア転職に関する様々な情報を発信しているのでぜひ。
➡︎りゅうき@Web制作頑張る人|Twitter

最後までご覧いただきありがとうございました!
ではまた次の記事で。