Webサイトで使えるWebフォント、Googleフォントを使用

1. Googleフォントの特徴

Webデザインにおいて、フォントの選びは、デザインの大きな要素となります。タイトル、見出し、本文など、文字サイズによっても、フォントを変更します。

Webサイトを作成するとき使用するフォントが、Webフォントです。その中でもよく使用されているのが「Googleフォント（Google Fonts）」です。

Googleフォントは、Googleが無償で提供するWebフォントおよびフォントのダウンロード配信サービスです。個人・商用問わず誰でも完全無料で利用でき、Webサイトの文字装飾や、デザイン制作などに幅広く活用されています。

今回は、Googleフォントを使用する方法と、カテゴリーごとに使える、おすすめフォントを紹介します。

2. Googleフォントの使い方

Google FontのWebサイトを開きます。左上のFiltersボタンをクリックします。左にソートボタンが表示されます。

Google FontのWebサイトを開き、左上のFiltersボタンをクリック

左にソートボタンが表示

今回は、Sans SelifのAllボタンをクリックします。フォント一覧にサンセリフ体一覧が表示されます。その中からJostをクリックします。

Sans SelifのAllボタンをクリックすると、サンセリフ体一覧が表示

フォント一覧の中からJostをクリック

Jostのフォント詳細ページが表示されます。右上のGet fontボタンをクリックします。フォントが選択されました。同じように他4つ、合わせて5つのフォントを選択します。右のGet embed codeボタンをクリックします。

Jostのフォント詳細ページの右上のGet fontボタンをクリック

フォントが選択される

他4つ、合わせて5つのフォントを選択し、右のGet embed codeボタンをクリック

右側に、記載するコードが表示されます。HTMLとCSSにそれぞれコピー&ペーストします。必要に応じてCSSの値を変更します。

また、フォントを追加変更する場合、HTMLの<link html =”https〜 の内容が変更になります。

右側のコードをHTMLとCSSにそれぞれコピー&ペースト

3. 日本語フォント

まずは、日本語フォントです。Googleフォントでは、日本語フォントはあまり多くありませんが、代表的なフォントは、Noto Sans Japanese、Noto Serif Japaneseです。ローマ字も対応しているので、見出しでも、本文でも使え、見やすく綺麗なフォントです。

Noto Sans JPは、GoogleとAdobeが共同開発した高品質な日本語の角ゴシック体です。癖がなく視認性に優れており、Webサイト、印刷物などあらゆるシーンで広く使われている定番フォントです。
伝統的な書体とモダンなデザインの中間に位置し、どんなデザインにも自然に馴染みます。

Noto Serif JPは、GoogleとAdobeが共同開発した高品質な明朝体フォントです。繊細な横線と力強い縦線のコントラストが特徴で、上品さ、信頼感、公式感を演出できます。デジタル画面と印刷物のどちらでも優れた視認性を発揮し、幅広い用途で活用されています。
伝統的な明朝体の美しさと現代的な洗練された骨格を融合させており、文章を大切にしたいデザインに適しています。

4. セリフ体

Google Fontでは、日本語フォントはあまり多くありませんが、欧文フォントは多く、デザインに合わせて、色々選ぶことができます。セリフ体は文字のストローク（線）の端に鱗のような装飾があるフォントです。
セリフ体は、視線の誘導を助け、文章のまとまりを良くするため、長文でも読みやすいのが特徴です。

Crimson Proはセリフ体ファミリーです。コンテンポラリーで、クリア、クラシック、そして丸みを帯びたオープンタイプです。大学の教科書や編集サイト、そして本長テキストに関するあらゆる読書体験に適したものです。

Crimson Text は、クラシックで品格のある欧文セリフ体フォントです。美しい旧活字（オールドスタイル）の伝統を受け継いでおり、過度な装飾がなく、落ち着いた雰囲気と優れた可読性を持っています

DM Serif Displayは、高コントラストの欧文フォントです。繊細なセリフと細部のディテールにより、デザインは大型ポスター設定で使用できる形に整えられています。

DM Serif Textは、クラシックかつ洗練された雰囲気を持つ欧文セリフ体フォントです。極端にコントラストが強い「DM Serif Display」の姉妹フォントとして、より小さめのテキストサイズや小見出し、本文でも読みやすくなるようコントラストを抑えて設計されています。

Playfair Displayは、高いコントラストと美しい曲線が特徴のエレガントなセリフ体フォントです。高級感や洗練された印象を与えるため、美容系Webサイトの見出しなどに最適です。

5. サンセリフ体

サンセリフ体は、文字の端にセリフがないフォントです。Webサイトのタイトルなどでも多く使用されています。
線の太さが均一に近く、シンプルでモダンな印象を与えます。視認性に優れ、スマホなどの小さな画面や遠くからでも読みやすいのが最大の特徴です。

Google Sansは、Googleのブランド書体であり、幅広い言語サポートを備えています。ローマ字とイタリック体のスタイルにおいて、重み、等級、光学サイズの軸を持つ可変フォントとして利用可能です。

丸みを帯びた幾何学的なフォルムで、画面上（デジタルデバイス）で非常に読みやすくデザインされています。

「Google Sans Flex」は、Googleが自社製品向けに開発し、一般にも公開した可変フォント（バリアブルフォント）です。1つのフォントファイルで太さや幅、文字の角の丸みなどを自由に調整できるのが特徴です。

Fredokaは、見出しや大きなテキストに少し楽しさを加えるのに最適な、大きく丸く太字のフォントです。幅と太さの軸を持つ可変フォントです。

6. スクリプト体

最後に装飾体の代表であるスクリプト体です。手書きや、筆記体のように文字が繋がったデザインの欧文フォントです。タイトルなどのアクセントに効果的なフォントです。Googleフォントでも色々なスクリプト体が使用できます。

Great Vibesは、カジュアルな大文字とよりフォーマルな小文字を組み合わせた、美しく流れるスクリプトです。タイトルで、アイキャッチとして入れるのに最適なフォントです。

清潔で整った手書きフォントは、女性らしい雰囲気があり、端が丸みを帯び、曲線も素晴らしいです。Webサイトにアクセントとして映えるなフォントです。

7. まとめ

これで、今回のBLOGは終了です。今回紹介したGoogleフォントは、ほんの一部で、デザインに合わせて色々なフォントが選べます。綺麗で、使いやすいフォントが多いので、Webデザインをするときは、とても便利なWebフォントです。

ソート機能も充実しています。セリフ体の中でも、丸みを帯びたものや、縦長のフォントをボタン１つでソートできるので、感覚的にフォントが探せるので、デザインするときにとても便利です。

フォントを探すだけでも楽しいので、Googleフォントのサイトで、フォントを探してみてはいかがでしょうか。