LINEで現役エンジニアに直接質問してみよう!登録無料

【2020年度版】google fontsの使い方総まとめ

google fontsとは、google社が作成し無料で提供しているフォントや、それを発信しているWebサイトのことです。

google fontsを使うと、全てのWebページでブラウザやOSに縛られず縛られず、共通のフォントを使えるようになるので、ページのスタイル崩れを防ぐことが出来ます。
また、フォント自体も大変美しいので、Webページに訪れた人が文字を見やすくなるなどのメリットがあります。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

google fontsとは?

google fontsはWebに美しさと速度性(パフォーマンス)を提供するために、googleが作ったWebフォントを無料で提供しているサイトです。

ダウンロードして使用することも出来ますし、googleが配信している超高速なサーバーを利用して、フォントを読み込んで使うことが出来ます。

どのようなWebサイトでも、ブラウザやOSに縛られず常に同じフォントを使用できます!

google fontsの使い方

google fontsを使うには4つのステップが必要です。

  1. googleフォントを探す
  2. googleフォントの選択
  3. googleフォントの読み込み
  4. googleフォントの指定

使い方はとても簡単です!

googleフォントを探す

使いたいgoogleフォント名がわかっている場合は、上の検索欄にフォント名を入力して検索出来ます。
googleフォントを初めて使う人は、その下のオススメのフォントが表示されているので、順番に2つぐらい選んで使いましょう。

ちなみに、1番目に表示されているのは、google fontsの中で世界で一番使われているフォント「Roboto」、2番目に表示されているのは、GoogleとAdobeが共同開発し、日本語にも対応したフォントです。

googleフォントの選択

使いたいフォントが見つかったら、右上のをクリックします。

使いたいフォントが選択されると、このように右下に「Family Selected 」のように表示されます。

googleフォントの読み込み

googleフォントをWebサイトに読み込みましょう。読み込むためのコードは右下のタブをクリックすると、そこに表示されます。

クリックすると、このようにタブが開き、Webページで使うのに必要なコードがすべて表示されます。

このコードだと、下記のコードをhtmlの<head>に追加します。

これで、googleフォントの読み込みは完了です。googleの提供する高速配信サーバーから配信されます。

googleフォントの指定

ここまでくれば、後はCSSのfont-familyRobotoを指定すると、使えるようになります。

フォントを設定すると、このように使えるようになります。

googleフォントのファイルサイズを劇的に削減する方法

googleフォントのファイルサイズを劇的に削減する方法が、googleの公式ドキュメントにアップされていたので、ここにまとめます。

Google Fonts – Optimizing your font requests

更に、そのよう内容をcolissさんがその使い方を詳しくまとめてくれています。

参考 Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応coliss

概要を簡単に解説すると、「使う文字のフォントだけをダウンロードすることで、容量を削減する」という方法です。

例えば、「天然温泉」というワードでしかgoogleフォントを使わないケースでは、それ以外の文字で使うことが無いのでファイルサイズが大きくなり、無駄になってしまいます。

そこで、googleフォントを読み込む時、URLにfontを使う文字を入れ込む事でその文字だけをダウンロードすることが出来るんです。

「天然温泉」のみ google font

すべての文字が google font

やり方はとても簡単です。

まず、Google Fontsを使う時の標準的な<link>タグを用意します。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">

次に、URLの最後に「&text=〜〜〜〜」のように、Google Fontsを使う文字列を入力します。例えば、先程の「天然温泉」の例だと、下記のようになります。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&text=天然温泉" rel="stylesheet">

実際には、UTF-8の文字をエンコードした文字列を使ったほうがいいので、最終的には下記のようになります。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&text=%E5%A4%A9%E7%84%B6%E6%B8%A9%E6%B3%89" rel="stylesheet">

これを実際に読み込ませて使うと、先程のように「天然温泉」だけがGoogle Fontsになります。

実際に、どのくらい容量が削減できたのでしょうか?

計測してみると、

  • 「&text=」なし: 29.9KB
  • 「&text=」あり: 695B

で、97.6%の軽量化に成功。また、それに伴って、54.3%の高速化も成功しました。

日本語を提供するフォントは9種類(2020年1月)

google fontsで日本語をサポートしているフォントは2020年1月現在9種類あります。

日本語対応フォントを紹介している特設ページがあって、そこでどういうフォントなのか実物をみて確認出来ます!

参考 Google Fonts + 日本語GitHub – Google Fonts

この中で一番オススメなのが、「M PLUS 1p」と「M PLUS Rounded 1c」です。キレイで読みやすいフォントです。

「M PLUS 1p」と「M PLUS Rounded 1c」の違いは、文字の角が丸みを帯びているかどうかです。なめらかな字体にしたい時は「M PLUS Rounded 1c」をいいでしょう

他のWebサイトではどんなフォントを使っている?

google fontsは実際のサイトで何が使われているのでしょう?今回調査をして見つかった2サイトを紹介します。

coliss

colissは、Web制作において有益な情報を沢山紹介している、有名なブログです。

このWebサイトでは、google fontsの「M PLUS Rounded 1c」が使われています。

esa

esaは、markdownで書く、チームで情報を共有するためのドキュメント管理サービスです。

このWebサイトでは、google fontsの「Lato」が使われています。「Lato」は英数字しかサポートしていないので、日本語の部分は「ヒラギノ角ゴPro W3」や「HiraKakuPro-W3」で対応しているようです。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。