【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」で対応しているようです。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ