google fontsの使い方・ダウンロード方法、日本語フォントにも対応!

フォント

Google Fonts に日本語フォントが正式に追加されたということで、これまで以上にGoogle Fontsの需要は広がってくるのではないでしょうか?
そこで、今回はGoogle Fonts の使い方・ダウンロード方法・追加された日本語フォントについてなどGoogle Fontsの基本をご紹介したいと思います。

Google Fontsの利用について

Google Fonts

Google Fonts とはgoogleが提供するwebフォントが完全無料で利用できるサービスのことで、商用利用も可能なサービスです。Webフォントとは、Webを閲覧する端末にインストールされた標準フォントを使用して表示する方法とは違い、webサイト側で用意したフォントをサーバーから直接読み込んで表示する方法のことを指します。サイト側で用意したフォントを使用するのでどの端末でみても同じフォントで表示されるというメリットと、フォントファイル自体をネット上で使用することになるので端末にインストールされたフォントを使用するよりも表示速度が遅くなるというデメリットがあります。Google Fontsは、このデメリットの部分を抑える可能性があります。Webフォントの表示によく使われるのは、サイトを構築するサーバーにフォントを置いて@font-faceをつかって表示させる方法ですが、Google Fontsの場合は、googleの高速サーバーにアップされているフォントを直接取り込み表示させることができるので、フォントの読み込み速度が通常よりも高速化されるという利点があります。
それでは、Google Fontsの使い方をみていきましょう。

フォントの探し方

Google Fontsには、多数のフォントが登録されています。ここでは、たくさんのフォントの中から、最適なフォントを見つける方法をご紹介します。

フォントの探し方

サイト内の上部に表示されているこの部分が、膨大なフォントデータの中から、最適な1つを見つけるための検索コンテンツ部分になります。
それでは早速使い方をみてみましょう!
まず初めに日本語フォントを確認する方法をご紹介したいと思います。
ただし、この多くのフォントのなかで日本語フォントに関してはまだ、8つしか公開されていません、なのでこれらを絞り込みで見つけることは簡単にできます。

日本語フォントの見つけ方

検索を開始するまえに、検索コンテンツ部分の一番右の「」ボタンをクリックしておきましましよう。このボタンをクリックしておくと、検索コンテンツの内容を一度初期値にもどしてくれます。リセットが完了したら Languages でJapaneseを選びます、すると日本語フォントの一覧が表示されます。

選択を解除したい場合は、「×」をクリックします。

フォントを効率的に探す方法

それでは、話を戻してフォントを検索する方法を紹介していきます。Google Fontsに収録されている言語の大部分はラテン(アルファベット)語です。日本語以外でよくつかう言語というと当然アルファベット(英語)になると思いますが、これが充実しているのはありがたいですね。しかし、たくさん登録されている分、目的に近いフォントを探すのはなかなか大変です。そこで、検索フィルターを使って、目的に絞り込んでいくことがフォントを探すポイントになります。
それでは、検索のフィルターメニューを見てみましょう。

検索フィルターの使い方

現時点でGoogle Fontsは英語表記のみでのサービス提供なので、見た目ちょっと分かりづらいでしょうか?これを日本語に直すとちょっとわかりやすくなるとおもうので確認してみましょう。

(追記)記事を書いたころから検索フィルターの仕様が変りましたが、内容は一緒ですので、右図の内容を現在の検索フィルターと比較してご確認ください。

検索フィルターの使い方

まずは、ルーペのマークの横の「Search(Search font)」ですが、ここはフリーワードで検索できます。あらかじめ探すフォントの名前などがわかっ
いる場合はここで検索します。

次に「Categories」と表記された項目ですが、書体を絞り込む部分になります。
Serif「明朝体」やSans Serif「ゴシック体」などはおなじみだと思いますが、これ以外にDisplay「装飾されたフォント」、Handwriting「手書き風フォント」、Monospace「等幅フォント(1文字の幅が全て同じ)」があります。

次に「Sorting」ですが、並び順(ソート)をどういった順番で並べるか選択できる項目です。
【現在は一覧右上部に「Sort by:~」で表示されています】
ここでは、Trending「最近注目されているもの」、Popular「人気があるもの」、Date Added「新着順」、Alphabetical「アルファベット順」の中から選択して並び替えることができます。

次の「Languages」については先ほど日本語フォントに関する項目でも説明しましたが、言語を選択できる項目になります。アルファベットのフォントを検索する場合は「Latin」を選択もしくは選択なしどちらでも大丈夫だと思います。

最後にNumber of styles以降【Font Properties】についてはフォントの特徴をつまみの幅を選択して絞り込むことがでる項目です。つまみは、左側が小(少)、右側が大(多)で遷移します。それでは、それぞれの内容を見てみましょう。

Number of stylesは「フォントの種類(フォントwightやイタリックなど)の数」を選択する項目です。一つのフォントの中でも、bold,medium,lightというように複数の種類に分かれるフォントがあるので、その種類の数で絞り込むことができます。この項目だけ、つまみの左端が「All」全選択になっています。

Thicknessは「文字の太さ」を選択できる項目です。

Slantは「文字の傾き」を選択できる項目です。左側が傾きなし右にスライドさせるほど傾きが増していきます。

Widthは「1文字当たりの幅の大きさ」を選択できる項目です。左側をにつまみを動かすとスリムなフォントが表示されます。

検索フィルターの仕様変更で、一覧全体の例文を変更する機能【Sentence】やフォントサイズを変更する機能、背景色を変更する機能、表示カラム数を切り替えれる機能が「 Search font」の右側に設置されました。

例文を使ってフォントの表示を確認する

Googel Fontsでは、フォントをある程度絞り込んだら、一覧で例文を使ってフォントのイメージを確認することがサイト上でできるのでとても便利です。例えば、見出し(短文)に使いたい、テキストとして使いなど、用途に合わせてイメージを検討したり、自分で用意した例文を試すといったことも可能です。それでは早速、使い方を見てみましょう。

google fonts 一覧

Googel Fontsを一覧で確認してみると、あらかじめ用意された文章が表示されていると思います。これが例文として用意されている文章で、デフォルトでは、見出し(短文)の見本が表示されています。この内容は例文をロールオーバーしたときに表示されるセレクトで変更できます。

左端のセレクトボックス、Sentenceが「見出し(短文)」、Paragraphが「段落」のことで長文テキストに使う場合のサンプルが確認できます。Alphabetが「アルファベットの全表記(ABCD…)」、Numeralsが「数字(1234…)」で、「Custom」は任意の文字を入力して表示させることが可能です。また、「Custom」を選択しなくても例文の文章を直接編集することもできます。

真ん中のセレクトでフォントの種類を変更したり、右端のセレクトで、フォントサイズの変更ができます。

APPLY TO ALL FONTS

そして、さらに便利なのが、例文ロールオーバー時下部に表示される「APPLY TO ALL FONTS」をクリックすると、一覧に表示されたすべてのフォントの例文をクリックしたフォントに設定した例文と同じ文章に入れ替えることができることです。
例えば、見出しに使いたいフォントを探すなら、使う予定のフレーズを全フォントに適応して一覧で比較しながら検討することができるので、スピーディーにフォント探しができます。

フォントをダウンロードする方法

サイトにフォントを組み込む前に、通常デザイン案を作成すると思います。Photoshopなどでフォント使う場合はPCにフォントがインストールされている必要があります。インストールするにはまず、フォントを入手しなければなりません。それでは早速フォントをダウンロードする方法を紹介します。

フォントをダウンロードする方法

フォント一覧のフォント名の左側、もしくは、フォント詳細の左側にある「+」、もしくは「SELECT THIS FONT」をクリックすると、フォントを選択することができます。フォントが選択されると、左下あたりに、「Family Selected」という黒いバーが出てきます。こちらをクリックすると、上部に選択したフォント名が表示されています。(解除するときはフォント横の「」をクリックします)フォントをダウンロードするには、この画面の左端のマークをクリックしてダウンロードしてください。複数種類のあるフォントの場合はすべての種類のフォントがダウンロードされていると思うので、必要な分だけフォントをインストールするといいと思います。

Google Fontsの使い方

Google Fontsの使い方

次に、サイト構築時にフォントを使用する方法をご紹介します。
通常サイトにフォントを取り込む場合、フォントを準備して、@font-faceで取り込みますが、Google Fontsの場合は、すでにGoogleのサーバーにアップされているフォントを使用することができるので、この作業をする必要がありません。フォントの呼び出し方法は、先ほどのダウンロードの項目からの続きになりますが、画面左下「Family Selected」の中で選択することができます。まず初めに、使用するフォントの種類を確認しておきましょう。フォント名の下「CUSTOMIZE」をクリックすると、フォントの種類(太文字、イタリック等)が複数ある場合、チェックボックで選択できるようになっていますので、必要なフォントを選択します。複数選択することもできますが、フォントの種類を多く使いすぎると読み込みが遅くなるおそれもあるので注意が必要です。

次に、フォントの読み込み方法ですが、方法は2種類用意されていて、「linkタグ」を使ってhtmlに呼び出す方法と「@IMPORT」を使って外部css内に呼び出す方法です。「Family Selected」の「EMBED」>「Embed Font」で選択してどちらかをソースに張り付ます。どちらの方法でも大丈夫ですが、「htmlに読み込むとcssで読み込むより少し早い」、「外部css内に読み込むとhtml内への記述を減らすことができる」など、それぞれにメリット、デメリットがあります。
ここで、基本的な注意点ですが、フォントの読み込みを「link」でする場合は、cssの記述より前に、「@IMPORT」で読み込むときも、cssの初めのほうに記述しておく必要があります。これはhtmlとcssの継承に関する話で、font-familyの記述が始まる前にフォントを読み込んでおかなければフォントが呼び出されないためです。

ここまで、設定できればあとは必要な場所で「Specify in CSS」に記載されたfont-familyを呼び出すだけです。ちなみに、同名で複数の種類のフォントを選択した場合は、デフォルト(font-weight: normal;、font-style: normal;)の場合は、複数フォントの選択画面で初期に表示されていたフォントが表示、フォントの太さを変えたい場合は、font-weight: 700;など「Family Selected」の「CUSTOMIZE」で数値を確認して指定。Italicを指定したい場合は「font-style:italic;」を使って指定します。

複数のフォントを使うこともできます

複数のフォントを使うこともできます

先ほど、1フォントあたりに含まれる複数のフォントを同時に設定する方法に触れましたが、フォント名が違うフォントを組み合わせて設定することも可能です。フォント詳細の左側にある「+」、もしくは「SELECT THIS FONT」を2種類以上クリックすると「Family Selected」に2種類のフォント名が並びます。この状態で「Embed Font」内のフォントを読み込む記述をサイトに加えると、複数のフォントを一回の記述でそれぞれ使えるようになります。
もちろん、この記述を複数回別々に記述しても問題なく動作します。

Google Fontsを複数使うときの注意点

Google Fontsが高速サーバーにアップされたフォントを読み込みため、従来よりも読み込みが速くなるとはいえ、読み込むフォントが増える程、遅くなっていくのは当然です。Google Fontsの「FamiliesSelected」内には、「Load Time: ~」と読み込み時間の目安を記載してくれていますが、これはあくまで目安です。日本語フォントと英語(ラテン)フォントではフォント内に含まれる文字の数が明らかに日本語のほうが多いといったように、単純にフォント数やフォントの種類の多さだけでは計れない部分もあるので、設置前に一度テストしてみるなど、慎重に検討する必要があります。