Google Fontsの使い方！日本語で使えるおすすめのフォント13選も紹介！

Google Fonts（グーグルフォント）が日本語対応のサービスを開始しました。Google Fontsは無料で使えるwebフォントであり、実用性が高いです。HTMLやCSSで日本語のフォントをデザインする際にはかなり重宝する機能と言えるでしょう。

Google Fontsを使うにあたっていくつか知っておきたいことがあります。今回はそのようなGoogle Fontsを使う上での知識をご紹介していきます。初めてGoogle Fontsの名を聞いた、Google Fontsを使ってHTMLやCSSを書き上げたい方におすすめです。

Google Fontsは日本語のwebフォントの中でも人気なフォントです。また、Google Fonts自体の使いやすさやデザイン性が高いフォントを数多く取り入れています。そのためデザイン性を上げたいwebサイトがあるのであればすぐにでも使い始めるべきでしょう。

加えて、Google Fontsには試し書きができるようになっています。まずはGoogle Fontsにどのようなデザインがあり、Google Fontsからどんなフォントを使うかを考えてみてはいかがでしょうか。念押しとして、Google Fontsは無料のwebフォントです。

Googleフォントはwebデザインをするうえで非常に重宝することは分かりますが、具体的な使い方に困惑される方も多いでしょう。そもそもGoogleフォントとはどういうものであり、webデザインをするうえでどのように使っていくのかご紹介します。

一言にwebデザインをすると言っても写真や画像、レイアウトなど工夫できるポイントはいくつかあります。ただし、その中でも文字（フォント）はwebページの訴求ポイント印象付けるために重要です。Googleフォントは日本語フォントであり、訴求ポイントを強くするために重要なツールです。

Googleフォントとはwebフォントを提供するGoogle社の製品です。Google社の製品であるということからも信用度は高いwebフォントと言えるでしょう。また、Googleフォントは完全無料かつ登録不要のwebフォントです。これが初心者の方にもおすすめできるポイントの1つです。

Googleフォントは商用利用もできるフォントですので、ドンドン使ってしまって問題ありません。日本語のみならず英語などのフォントも豊富です。日本語でwebサイトを作る方が多いと思いますが、使ったことのない日本語のwebフォントを気軽に試せるのもおすすめするポイントです。

Googleフォントはwebデザインをする上で重要な日本語のwebフォントです。しかし、webフォントって何、と疑問に思われている方も多いでしょう。Googleフォントの重要性を理解するためにもwebフォントが何かをお伝えしておくことにします。

今回は初心者の方向けの説明のため詳細なwebフォントの説明ではありません。しかし、webデザインをはじめる方にとっては重要な内容に違いありません。Googleフォントがどのような場面で役立って行くのかを考えながらご覧ください。

まず、webフォントが必要な理由はユーザーの使用端末によって文字フォントが異なるためです。webサイトを閲覧する際には作成者がCSSで指定した文字フォントが優先的に表示されます。しかし、そのフォントが使っている端末に搭載されていない場合は違うフォントに変換されてしまいます。

つまり、作成者が意図せず残念なwebサイトをユーザーに見せることになります。この問題を解決するためにネットワーク上にwebフォントを置くことでユーザーが作成者の見せたいフォントで閲覧できるようにしたのです。webフォントとはどんなユーザーでも同じ文字フォントを見るようにするツールです。

Googleフォントをはじめwebフォントを使うことで2つのメリットがあります。1つ目はアクセシビリティの向上です。web作成においてアクセシビリティとは年齢や利用環境、あるいは障害の有無によってストレスを感じさせないことを指します。

webフォントを使うことによって文字フォントが変わることはなくなり、画像を入れる箇所にwebフォントを追加することによって音声読み上げや文字サイズの調整もできるようになります。日本語が分からない人も翻訳ツールを使ってwebサイトを閲覧することができるようになります。

2つ目のメリットはwebフォントによってデザインの差別化ができるという点です。正しくはデザインの差別化が容易になると言った方が良いでしょう。webフォントを使わない場合はあらゆる利用環境を考慮してフォントを選ばなければいけませんが、webフォントを使えば気にせずにデザインできます。

また、画像に文字を挿入する場合、illustratorやPhotoshopを使ってwebサイトに表示させることができます。しかし、この方法では修正に時間がかかりすぎます。一方、webフォントを画像に導入しておけばHTMLやCSS上でテキストを修正すれば完了となります。

Googleフォントのダウンロードの使い方に入る前にGoogleフォントのダウンロード方法についてお伝えしておきます。Googleでは日本語以外のwebフォントも公開していますが、今回は日本語のGoogleフォントのダウンロード方法のみをご紹介します。

また、GoogleフォントはPCにダウンロードするほかにwebサイト上で利用することもできますので、ダウンロードする前に一度、好みのGoogleフォントをweb上で使うことをおすすめします。web上で使うことで日本語がどのように表示されるのかを試すことができるからです。

好みのGoogleフォントをダウンロードするためには、それぞれのGoogleフォントの右上にある”＋マーク”をクリックします。クリックすると画面下にバーが表示されます。そのバーをさらにクリックしてください。

バーをクリックすると選んだGoogleフォントの詳細が表示されます。ここで右上にある”ダウンロードマーク”をクリックすればダウンロードが開始されます。WindowsとMacでは表示が異なりますが、これでフォントを追加することにより各種ソフトでGoogleフォントが利用できるようになります。

Googleフォントをダウンロードする際に苦労するのは検索の使い方です。Googleフォントは英語で管理されているため日本語で検索することは困難です。そのため日本語のGoogleフォントを検索するおすすめの方法もお伝えしておきます。

まずはGoogleフォント（Google Fonts）をネット上で検索しトップページにアクセスしてください。トップページに入ると右上に”検索アイコン”が表示されているのでクリックしてください。現在では検索ページの一番上に「Categories」があり、カテゴリー検索（ソート表示）ができるようになっています。

カテゴリー検索ではSerif（明朝体）、Sans Serif（ゴシック体）、Display（装飾文字）、Handwriting（手書き文字）、Monospace（文字幅が全て同じ文字）が選択できます。ダウンロードしたいカテゴリーのみにチェックを入れることでおすすめのGoogleフォントを表示できます。

Googleフォントの検索方法の中でも特におすすめな使い方は絞り込み検索を使う方法です。ダウンロードする際にはおすすめのGoogleフォントをそのまま検索するよりも好みを絞り込む使い方が適しているためです。また、Googleフォントではさまざまな絞り込み要素があります。

Languages（言語）の絞り込み機能があります。日本語も絞り込めるのですが、そのほかの絞り機能と併せて使えないという欠点があるため注意が必要です。次にNumber of styles（スタイルの数）があります。この絞り込みでは検索したいGoogleフォントに太字や斜体と言ったスタイル数について絞り込むことができます。 

このほかにも絞り込み機能はあり、おすすめのGoogleフォントを探す上で重宝します。ダウンロードする際にはぜひ使ってみてください。

Googleフォントでは表示を制限するだけでなく、各Googleフォントの並び順を設定することもできます。検索ページ内に「Sorting」（並び替え）があり、中にはTrending（流行順）、Popular（人気順）、Date Added（新着順）、Alphabetical（アルファベット順）が選択できます。

流行順にすることでSEO対策にもつながりますし、人気順にすれば好印象を持ってくれるデザインにしやすくできます。新着順で検索をして斬新さを取り入れることも可能です。もし、おすすめのGoogleフォントの名前が分かっているのであればアルファベット順にすると見つけやすくなります。

Googleフォントをwebデザインするために使うためにはダウンロード画面にあった「CUSTOMIZE」をクリックします。なお、ダウンロードする際には複数個を一度に選ぶこともできますが、好みのGoogleフォントの”＋マーク”を複数個押しておくだけであり、その他はダウンロード方法で前述した内容と同じです。

「CUSTOMIZE」で使いたいフォントサイズを選ぶことができます。選択後、「EMBED」をクリックするとHTML上で使えるコードが発行されます。このコードを使うことで簡単にHTMLでwebデザインができます。また、Googleフォントの使い方としてはCSSに貼りつける方法も考えられます。

CSS上での使い方としては”EMBED”をクリックした後に”＠IMPORT”をクリックすればCSS上で使えるコードが発行されます。Googleフォントの使い方にはwebデザインに適しているという点からHTMLとCSSをご紹介しました。

Googleフォントを使う上で注意しなければならないのはGoogleフォントのデータ量です。Googleフォントはwebフォントということもあり、Googleフォント自体にデータ量が多い場合は読み込みに時間がかかってしまいます。そのためおしゃれにしすぎるというのも考え物なのです。

また、Googleフォントは完全無料で商用利用もできますが、他のフォントを混在させて使う場合には著作権に注意してください。ただし、Googleフォントは数少ない日本語webフォントを持っているため混在させるというのは少ないでしょう。よって、画数の多い日本語、特にGoogleフォントではデータ量に注意しましょう。

Googleフォントをwebデザインで使う場合はfont-familyを利用して構築するとよいでしょう。ただし、初心者の方にとってfont-familyを使うことは少し難しいかもしれません。そのためGoogleフォントとfont-familyの活用の仕方をお伝えしておきます。

font-familyはCSSで使うプロパティのことです。なぜfont-familyとGoogleフォントを一緒に使うのかというとプロパティを設定しておくことでGoogleフォントを使ったデザインを容易にできるためです。また、font-familyが閲覧者に合わせたフォントを提供するために生まれたプロパティであり相性が良いです。

font-familyの書き方としては「font-family：フォントの種類;」となります。CSS上でGoogleフォントをはじめとするwebフォントの入力は簡単です。しかし、ここに間違ったwebフォント、特にGoogleフォントなどの無料フォントではないものを入れると問題になりますのでご注意ください。

一般的にfont-familyは1つのwebフォントを入れることは少ないです。なぜなら使用OSによってフォントが違うように見えるためです。したがってfont-familyには複数のwebフォントを入れますが、font-familyの使い方を交えてご紹介しておきます。

font-familyで複数のwebフォントを入力する際には「font-family：’A',’B',’C',’D';」と入力します。こうすることによってA、B、C、Dという言語の中から閲覧者の持っているフォントに合わせてwebページを表示させることができます。

また、入力されているwebフォントの内すべてを表示させるわけでなく先に入力されたフォントが優先的に表示されることになります。つまり、Aというフォントが無ければB、Bが無ければC、Cが無ければDと言った具合に表示される優先度が決まっていることに注意しましょう。

webサイトを製作する上でコードを調えるため、webフォントは英語対応のフォントを先におき日本語のwebフォントは後におきましょう。ほとんどのwebサイトは英語と日本語が混在しています。font-familyで複数のwebフォントを入れる際のルールとして覚えておきましょう。

おすすめのGoogleフォントとして万能系7つがあります。Noto Sans、Noto Serif、Open Sans、Bitter、Libre Baskerville、Crimson Text、Signikaです。この7つに関してはまずダウンロードしておくことをおすすめします。

ロゴ系としてはCandal、美容系としてはCinzelが外せません。そして、日本語の文章をメインで書くのであればはんなり明朝とこころ明朝は是非試してみてください。この二つのGoogleフォントを置くだけで日本のイメージを与えてくれる強力なフォントです。

残り3つはDancing Sctiptという筆記体の文字を美しく表現しているフォントとPacificoという同じく筆記体でありながら可愛さのあるアメリカンなフォントです。この2つのフォントはロゴでも役に立つフォントのためフォントを選ぶ1つの基準としてダウンロードしておきましょう。

Patua Oneは力強さをアピールしたいときに使えるフォントで、スポーツなどの記事を書く際にはロゴとしても力を発揮してくれます。Googleフォントにはまだまだ多くのフォントがあるので色々試してみましょう。

Googleフォントは商用利用もでき、日本語フォントも豊富な日本人web作成者に優しいwebフォントです。フォントが違うだけでwebサイトの印象は大きく異なります。Googleフォントを駆使してwebサイトのクオリティを上げていきましょう。