【手順解説】無料で使えるWebフォント「Google Fonts」の使い方

【手順解説】無料で使えるWebフォント「Google Fonts」の使い方
Google Fonts

最近のWebサイトではPCやスマホにフォントが搭載されていなくても使用できる「Webフォント」というものも種類が増えてきました。

一昔前は、日本語は漢字・ひらがな・カタカナなど文字種が多いため、Webフォント向きではないと言われ、種類も少なかったですが、近頃は日本語にも対応したWebフォントがたくさんリリースされています。

今回はWebフォントの使い方から、おすすめのWebフォントまでご紹介していきます。

Advertisement

「Webフォント」とは?

typography

通常WebサイトをPCやスマホで閲覧するときは、ページ内のテキストは、その端末にインストールされているフォントでのみ表示が可能です。

ですが、サイト制作者側がWebページに「Webフォント」で表示する指定をしておくと、そのフォントが閲覧者の端末にインストールされていなくても、指定されたフォントでテキストを表示することができます。

Google Fontsの導入方法

今回は、利用も無料で、カンタンにWebサイトに導入できる「Google Fonts」でのWebフォント利用方法をご紹介します。

サイトにアクセス

まずはGoogle Fontsのサイトにアクセスします。
https://fonts.google.com/

サンプルで見た目を確認

「Type something」の部分に好きな文字を入力すると、その文字がそれぞれのフォントで表示されるようになります。

サンプルで見た目を確認

Advertisement

使用したいフォントをクリック

表示されたフォント一覧の中から、使用したいフォントをクリックします。

使用したいフォントをクリック

使用したい太さ(ウェイト)を指定する

使用したいフォントの画面に遷移したら、そのフォントの様々な太さ・スタイルを選ぶことができます。

使用したいスタイルの部分にある「+Select this style」をクリックすると、右側の選択済みの部分に追加されます。

複数のスタイルを使用したい場合は、同じように「+Select this style」をクリックして、右側に使用したいスタイルがすべて表示されるようにします。

使用したい太さ(ウェイト)を指定する

CSS埋め込み用タグを発行

使用したいフォントやスタイルをすべて選択し終わったら、「Embed」をクリックします。

CSS埋め込み用タグを発行

すると、そのフォントを使用するために読み込むべきCSSのコードが表示されます。

HTMLソースコードに追加するlinkタイプと、既存CSSファイルに追加する@importタイプのどちらか好きな方を選択することができます。

また、そのフォントを適用したい要素に反映させるべきCSSのコードも表示されます。

CSS埋め込み用タグを発行
CSS埋め込み用タグを発行

これで、目的のフォントを使用することができました。

Advertisement

効率よくフォントを探す方法

typography

Google Fontsには、現在膨大な量のフォントが存在しています。

そのため、理想のフォントを探すために、一つひとつ見た目を確認していては日が暮れてしまいます。

ここからは、理想のフォントをすぐに見つけるための方法をご紹介します。

フォントのフィルタ機能を使う

非常にたくさんのフォントの種類があるため、Google Fontsには、フォントの見た目などの特徴から候補を絞り込んでくれるフィルタ機能が存在します。

「Categories」をクリックすると、フォントのカテゴリで絞り込むことができます。

明長系やゴシック系、手書き風など必要なカテゴリだけにチェックを入れれば、そのカテゴリに属するフォントだけが表示されるようになります。

「Language」をクリックすると、言語の選択ができ、日本語フォントだけ表示するなども簡単にできます。

「Font properties」をクリックすると太さや幅などからも指定できるため、これら全てを指定するとかなり理想のフォントのみに絞り込まれるのではないでしょうか。

Advertisement

まとめ

きょうはここまで、簡単にWebサイトに導入できるWebフォント「Google Fonts」の導入方法をご紹介してきました。

これまではいくらきれいにWebサイトをデザインしても、見る人のPCに理想のフォントがインストールされていない場合、思わぬ表示崩れを起こすこともありましたが、このWebフォントを使うことにより、デザイナーの思った通りの表示となり、崩れも防ぐことができます。

導入することによって少しサイト表示が重くなることがありますが、多数のフォントやスタイルを使用しなければ、耐えられないほどの表示の遅さにはならないと思います。

現在管理されているサイトの見た目を、パッと簡単に変えてみてはいかがでしょうか。

こちらもお読みください

Web開発カテゴリの最新記事