Google Fontsとは?Adobe Fontsなどとの違いと使い方を解説

Webフォントを使ってみたいけれど、フォントのファイルをどこで手に入れて、どうやってサイトに組み込めばいいのか分からない、という人は多いのではないでしょうか。

そんなときに便利なのが、Google FontsやAdobe Fontsのような「フォントサービス」です。

フォントサービスを使えば、数行のコードを貼るだけで、自分のサイトにWebフォントを導入できます。

この記事では、Google Fontsをはじめとするフォントサービスとは何か、代表的なサービスの違い、Google Fontsの基本の使い方を初心者向けに解説します。

フォントサービスの基本

まずはフォントサービスがどんなもので、代表的なサービスにはどんな違いがあるのかを押さえましょう。

フォントサービスとは何か

フォントサービスとは、Webフォント(ページを表示するときにサーバーからダウンロードして使うフォント)を、自分のサーバーの代わりに配信してくれる外部のサービスのことです(Webフォントの仕組みはWebフォントとは?で解説しています)。

Webフォントを自分で用意する場合、フォントファイルの入手、サーバーへの設置、CSSでの読み込み設定、ライセンス(利用条件)の確認などを自分で行う必要があります。

フォントサービスを使うと、こうした作業の多くをサービス側が引き受けてくれるため、サービスが用意したコードをHTMLに貼り付けるだけでWebフォントが使えるようになります。

特に日本語のフォントは収録文字が多くファイルが大きいため、必要な文字だけを効率よく届ける仕組みを持ったサービスを使えるのは大きなメリットです。

Google Fontsとは

Google Fonts(英語)は、Googleが提供している無料のフォントサービスです。

アカウント登録をしなくても使え、日本語の書体も含めて多くのフォントが公開されています。

公開されているフォントはすべてオープンソース(誰でも無料で利用・再配布できる条件で公開されたもの)で、Webサイトだけでなく、印刷物やアプリなどの商用利用もできるとGoogle FontsのFAQ(英語)で説明されています。

ここでいう商用利用とは、自分の仕事のサイトや、クライアントから依頼されたサイトなどに使っても、使用料を払う必要がないという意味です。ただし、オープンソースだからといって著作権が無くなるわけではなく、作者が定めたライセンスの範囲で自由に使える、という点は覚えておきましょう。

ライセンスの多くはSIL Open Font License(OFL)(英語)で、フォントのファイル単体を販売することなどは禁止されているため、再配布するときは各フォントのライセンスを確認しましょう。

代表的なフォントサービスの違い

Google Fonts以外にも、フォントサービスはいくつもあります。

代表的なサービスを比べると、次のようになります。

サービス	提供元	費用の考え方	特徴
Google Fonts(英語)	Google	無料	登録不要。オープンソースのフォントなので、ファイルをダウンロードして自分のサーバーに置くこともできる
Adobe Fonts	Adobe	Creative Cloudのプランに含まれる	和文・欧文とも書体が豊富。Adobeが用意する埋め込みコードで使う
Morisawa Fonts(Webフォント)	モリサワ	有料の契約	国内フォントメーカーの日本語書体を使える
FONTPLUS	Monotype	有料の契約	複数のフォントメーカーの日本語・欧文書体をまとめて使える

料金や使える書体の数は変わることがあるので、契約前には各サービスの公式ページで最新の条件を確認してください。

大まかに言えば、まずは無料のGoogle Fontsで試し、表現したい雰囲気に合う書体が見つからない場合や、仕事で特定の書体を使う必要がある場合に、有料のサービスを検討するという流れが分かりやすいです。

なお、モリサワが以前提供していたWebフォントサービス「TypeSquare」は新規受付を終了しており、後継として「Morisawa Fonts」のWebフォントが案内されています。

古い解説記事ではTypeSquareが紹介されていることがあるので、注意しましょう。

Adobe Fontsの特徴

Adobe Fontsは、PhotoshopやIllustratorなどのアプリと同じ、Creative Cloudというサブスクリプション(月額・年額で契約するサービス)に含まれるフォントサービスです。

Webで使う場合は、Adobe Fontsのサイトで「Webプロジェクト」を作って使う書体を登録し、表示された埋め込みコードを自分のサイトに貼り付けます。

日本語の書体には、ページで使われている文字を調べて必要な文字だけを配信する「ダイナミックサブセット」という仕組みが使われています(Adobe Fonts「Dynamic subsetting」(英語))。

注意したいのは、Adobe FontsのWebフォントは、契約が続いている間だけ使えるという点です。

公式ヘルプでは、Creative Cloudの契約を解約するとWebフォントがサイトで使えなくなり、CSSで指定した代わりの書体などで表示されると説明されています(Adobe Fonts の web フォント)。

つまり、契約が切れると、サイトの文字がまとめて別の書体に切り替わり、作ったときとは違う見た目になってしまいます。クライアントのサイトで使う場合は、誰の名義で契約し、誰が支払いを続けるのかを、事前に決めておきましょう。

Google Fontsの使い方

ここでは、無料ですぐに試せるGoogle Fontsを例に、Webフォントを導入する手順を見ていきます。

画面の表記は変わることがあるので、流れをつかむつもりで読んでください。

手順1:書体を探して選ぶ

Google Fontsのサイトを開き、検索や絞り込みで使いたい書体を探します。

日本語の書体を探すときは、言語の絞り込みで「Japanese」を選ぶと、日本語に対応した書体だけが表示されます。

書体のページでは、サンプルの文章を自由に入力して表示を確かめられるので、実際にサイトで使う見出しや文章を入れて比べてみましょう(書体を選ぶときの考え方は見やすいフォントの選び方とは?で解説しています)。

手順2:ウェイトを選んで埋め込みコードを取得する

書体が決まったら、「Get font」から「Get embed code」へ進むと、サイトに貼り付けるコードが表示されます。

ここで、使うウェイト(文字の太さ)を選びます。

Google Fontsでは何種類でも無料で選べるため、細め(300)・標準(400)・太め(700)・極太(900)とつい全部選びたくなりますが、日本語の書体は1つの太さだけでも収録文字が多く、太さを増やした分だけ読み込むデータも増えます(重くなる理由は日本語Webフォントとは?で解説しています)。

「あれば使うかも」で選ばず、本文用の標準の太さと、強調用の太字の2種類程度に絞るのがおすすめです(ウェイトの使い分けはフォントの「太さ(ウェイト)」で解説しています)。

手順3:HTMLとCSSにコードを書く

表示されたコードを、HTMLの<head>の中に貼り付けます。

<head>は、HTMLファイルの上のほうにある<head>〜</head>で囲まれた部分で、ページのタイトルや読み込むCSSなど、画面には直接表示されない設定を書く場所です。自分のCSSファイルを読み込む行と並べて、たとえば次のように書きます。

<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <!-- ここにGoogle Fontsのコードを貼る -->
  <link rel="stylesheet" href="style.css">
</head>

日本語書体のNoto Sans JPを、標準(400)と太字(700)の2つのウェイトで読み込む場合、コードはおおよそ次のようになります。

<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">

1行目と2行目のpreconnectは、フォントの配信元のサーバーへ早めに接続しておくための指定で、3行目がフォントを読み込む本体です。

3行目の最後にあるdisplay=swapは、フォントが届くまでの間、先に代わりの書体で文字を表示しておくための指定です(読み込み中の表示のしかたはWebフォントの読み込み速度とは?で詳しく解説しています)。

コードを貼ったら、自分のCSSファイル(上の例ではstyle.css)のfont-family(文字の書体を指定するプロパティ)でフォントの名前を指定します。

body {
  font-family: "Noto Sans JP", sans-serif;
}

最後のsans-serifは、フォントを読み込めなかったときに使う「ゴシック系の書体なら何でもよい」という保険の指定です。回線が不安定なときや、社内のネットワークで外部のサーバーへの接続が制限されているときなどは、Webフォントが届かないことがあります。この指定が無いとブラウザの初期設定の書体で表示され、ゴシック体のつもりで作ったページが明朝体になってしまうこともあります。明朝系の書体を使う場合は、最後をserifにします。

CSSの基本的な書き方は、CSSとは?で解説しています。

見出しと本文で書体を組み合わせるコツ

フォントサービスでは多くの書体を手軽に試せるため、見出しと本文で別々の書体を組み合わせることもできます。

組み合わせるときは、「見出しは印象を出す書体、本文は読みやすい書体」と役割を分け、書体の数は2種類程度に抑えるのが基本です。

たとえば次の見本のように、見出しだけ明朝体、本文はゴシック体にすると、上品さと読みやすさを両立しやすくなります(2つの書体の特徴は明朝体とゴシック体の違いとは?で解説しています)。

はじめての器えらび

毎日の食卓に合う器の選び方を、素材や形の違いからやさしく紹介します。

見出しも本文も明朝体

はじめての器えらび

毎日の食卓に合う器の選び方を、素材や形の違いからやさしく紹介します。

見出しは明朝体、本文はゴシック体

左の見本は見出しも本文も明朝体、右の見本は見出しだけ明朝体で本文をゴシック体にしたものです。

左は全体に落ち着いた雰囲気でまとまり、右は見出しで上品さを出しながら、線の太さが均一なゴシック体の本文で、小さな文字でもすっきり読みやすい印象になります。

どの組み合わせが正解ということはないので、サイトの雰囲気に合わせて、実際の文章を入れて比べながら決めましょう。

実践のポイント

フォントサービスを使うときにつまずきやすい点と、よくある疑問をまとめます。

注意点・よくある間違い

書体を選べる数が多いため、目的に合わない書体やウェイトまで次々と読み込んでしまうことがあります。
読み込む書体とウェイトが増えるほどページの表示は遅くなるので、使うものだけに絞りましょう。
無料だからといって、ライセンスを確認せずに使ってしまうことがあります。
Google Fontsのフォントは商用利用できますが、再配布などには条件があり、他のサービスでは利用範囲が契約内容で決まっているので、必ず各フォントの規約を確認しましょう。
有料サービスの契約が切れたあとも、同じ書体で表示され続けると思い込んでしまうことがあります。
Adobe Fontsのように、契約中だけ使えるサービスもあるので、サイトを長く運用する場合は契約の続け方も考えておきましょう。
font-familyにフォントサービスの書体名だけを書き、代わりの書体を書き忘れることがあります。
サービスに接続できなかったときに備えて、最後にはsans-serifやserifを書いておきましょう。

よくある質問

Q. Google Fontsは本当に無料で商用利用できる?
A. Google Fontsで公開されているフォントはオープンソースで、公式FAQでは商用利用も可能と説明されています。
ただし、フォントのファイル単体の販売が禁止されているなど、ライセンスごとの条件はあるので、各フォントのページでライセンスを確認しましょう(確認のポイントはフォントライセンスとは?で解説しています)。
Q. Google Fontsのフォントを、自分のサーバーに置いて使ってもいい?
A. 使えます。
オープンソースのフォントなので、ファイルをダウンロードして自分のサーバーから配信することもできます。
外部のサーバーに接続しなくて済む反面、ファイルの準備や更新は自分で行う必要があります。
Q. Google Fontsを使うと、閲覧者の情報がGoogleに送られる?
A. 公式のプライバシーに関するFAQ(英語)では、Google FontsのAPIはCookieを設定・記録しない一方、フォントを届けるためにIPアドレスなどの情報は受け取ると説明されています。
気になる場合は、フォントを自分のサーバーに置いて配信する方法も選べます。