owned mediaウェブ制作に役立つコンテンツを発信中!

便利に使えるグーグルフォントのオススメ書体まとめ

最終更新日: Update!!
グーグルフォントはグーグルが提供している無料で使えて、種類も豊富なフォント配信サービスです。実際に導入しているサイトも数多く、私自身もクライアントワークでもよく利用しています。ただ、グーグルフォントは扱える書体もかなり多いため、初めて利用する際にはどれを使うか迷う人も多いのではないでしょうか。そこで今回はどんなデザインでも対応できるように、覚えておくと便利なグーグルフォントのオススメ書体をまとめてみたいと思います。 【Google Fonts】 https://fonts.google.com   グーグルフォントのサイトにアクセスすると、このように様々な書体が並び、使う書体を選択すると、CDNとして使うHTMLタグと埋め込み用のCSSコードが出力される仕組みで、デスクトップフォントとしてもフォントデータがダウンロードできます。 便利に使えるグーグルフォントのオススメ書体まとめ 便利に使えるグーグルフォントのオススメ書体まとめ フォントを探すときには、入力するなどで検索ができるのでとても使いやすいですね。今回は人気のある順にソートして、その中からピックアップしていきたいと思います。  
欧文書体でオススメのグーグルフォント
【Roboto】 https://fonts.google.com/specimen/Roboto 便利に使えるグーグルフォントのオススメ書体まとめ グロテスクサンセリフタイプの書体で、ウエイトもたくさん揃っておりとても使いやすい書体になるのではないでしょうか。モバイル端末でも視認性が良く、現代のウェブサイトにとても相性の良いフォントです。迷ったらまずはこの書体を入れておくといいですね。   【Lato】 https://fonts.google.com/specimen/Lato 便利に使えるグーグルフォントのオススメ書体まとめ ヒューマニスティックサンセリフと呼ばれるタイプの書体で、先ほどのRobotoとよく似ていますが、曲線的な作りになっており、少し柔かい印象があります。Robotoでは無機質で冷たく感じる時には代わりに使える書体ですね。   【Roboto Slab】 https://fonts.google.com/specimen/Roboto+Slab 便利に使えるグーグルフォントのオススメ書体まとめ グーグルフォントの中でもスラブセリフ書体はたくさんありますが、比較的使いやすい形で、ウエイトもたくさん揃っているのはこの書体になります。この書体でスラブセリフフォントはカバーできそうですね。   【Oswald】 https://fonts.google.com/specimen/Oswald 便利に使えるグーグルフォントのオススメ書体まとめ 幅が狭いコンデンス系フォントになります。クールでシャープな印象を与えることができますので、デザイン性の高いサイトでは重宝しそうです。ボディテキストだけでなく、キャッチコピーにも使えますね。   【Montserrat】 https://fonts.google.com/specimen/Montserrat 便利に使えるグーグルフォントのオススメ書体まとめ ジオメトリック系のサンセリフ書体になります。オシャレで洗練された印象を与えることができます。形もベーシックなものになるので、比較的使いやすいのではないでしょうか。   【Raleway】 https://fonts.google.com/specimen/Raleway 便利に使えるグーグルフォントのオススメ書体まとめ 先ほどのMontserratと同じくこちらもジオメトリック系のサンセリフ書体になります。ただしこちらは少し形が特徴的で、よりデザイン性の高い場合に使えるのではないでしょうか。数字の場合は少しクセが強いので注意が必要ですね。   【Playfair Display】 https://fonts.google.com/specimen/Playfair+Display 便利に使えるグーグルフォントのオススメ書体まとめ セリフ書体の中でも、洗練された印象を持つモダンフェイス系のフォントになります。ファッション系やハイブランドなどのイメージを表現するのに重宝します。女性向けのデザインとも相性が良さそうですね。   【Abril Fatface】 https://fonts.google.com/specimen/Abril+Fatface 便利に使えるグーグルフォントのオススメ書体まとめ 同じくこちらもモダンフェイス系のセリフ書体になりますが、よりコントラストが強く直線的になっており、どちらかというとディスプレイ書体に近い印象もあります。ボディテキストには使いにくいですが、見出しやキャッチコピーに使うことでかなりインパクトを出せるのではないでしょうか。   【Lobster】 https://fonts.google.com/specimen/Lobster 便利に使えるグーグルフォントのオススメ書体まとめ アメリカンな雰囲気を感じるスクリプト系のフォントです。ポップで楽しそうなデザインを表現したい場合に便利です。イラストとの相性も良さそうですね。レストランバーなどの飲食店に使われるイメージがあります。   【Great Vibes】 https://fonts.google.com/specimen/Great+Vibes 便利に使えるグーグルフォントのオススメ書体まとめ 続けてスクリプト書体のフォントになります。こちらはスクリプト書体の中でも上品で軽やかな印象があり、女性向けのカジュアルなデザインに使えるのではないでしょうか。この書体を使うだけで特徴的な世界観を表現できそうですね。   【Dancing Script】 https://fonts.google.com/specimen/Dancing+Script 便利に使えるグーグルフォントのオススメ書体まとめ こちらもスクリプト書体ですが、先ほどの2つと比べて比較的ベーシックな形をしており、クセがないため手軽に使うことができます。ちょっとしたアクセントに採用したい場合に便利なフォントです。   【Shadows Into Light】 https://fonts.google.com/specimen/Shadows+Into+Light 便利に使えるグーグルフォントのオススメ書体まとめ 見た目がかなり特徴的なハンドライト系の書体です。どこかユルく可愛さを感じられるデザインで、デザインの世界観を簡単に表現できるのではないでしょうか。カジュアル系のデザインに使えそうですね。  
和文書体でオススメのグーグルフォント
グーグルフォントには欧文書体だけでなく、和文書体も用意されています。フォントベンダーが提供している有料のサービスと比較すると充実度は低いかもしれませんが、十分デザインに使えるフォントが揃っています。 【Google Fonts + 日本語】 https://googlefonts.github.io/japanese/ 便利に使えるグーグルフォントのオススメ書体まとめ   【Noto Sans JP(源ノ角ゴシック)】 https://fonts.google.com/specimen/Noto+Sans+JP 便利に使えるグーグルフォントのオススメ書体まとめ ベーシックな形のゴシック体で、ボディテキストから見出し、キャッチコピーまで幅広く使えます。ボディフォントなどでよく使われるヒラギノ角ゴシックや游ゴシックと比べるとモダンな印象があります。コーポレートサイト案件などで洗練された印象を出したい時には有効ではないでしょうか。グーグルフォントでは「Noto Sans JP」となっていますが、ディスプレイフォントなどで使われる場合には「源ノ角ゴシック」で扱われることもあります。   【Noto Serif JP(源ノ明朝)】 https://googlefonts.github.io/japanese/#notosansjapanese 便利に使えるグーグルフォントのオススメ書体まとめ 先ほどのNoto Sans JPの明朝体になり、こちらも汎用性のある使いやすいフォントです。明朝体は環境ごとに用意されているフォントがまちまちになるので、明朝体を使う箇所が多い場合にはこのフォントを採用した方が良さそうですね。こちらもグーグルフォントでは「Noto Serif JP」となっていますが、ディスプレイフォントなどで使われる場合には「源ノ明朝」名称が変わることもあるようです。   【M PLUS 1p】 https://fonts.google.com/specimen/M+PLUS+1p 便利に使えるグーグルフォントのオススメ書体まとめ 読みやすいデザインに整えられた、モダン系ゴシック体のフォントです。ウエイトもたくさん揃っており、細字〜レギュラー書体はボディテキストに、太字は見出しやキャッチコピーに使えます。普通のゴシック体と比べてインパクトを出せますが、チープな印象を感じられることもあるので、使いどころは気をつけたほうが良さそうですね。   【M PLUS Rounded 1c】 https://fonts.google.com/specimen/M+PLUS+Rounded+1c 便利に使えるグーグルフォントのオススメ書体まとめ 先ほどのM PLUS 1pを丸ゴシック体にしたものになります。太字で使うとかなりポップな雰囲気になります。使用できるデザインは限られるかもしれませんが、可愛い系や、カジュアルポップな雰囲気にはマッチしそうですね。   【さわらびゴシック】 https://fonts.google.com/specimen/Sawarabi+Gothict 便利に使えるグーグルフォントのオススメ書体まとめ 形としてはベーシックなゴシック体になりますが、どこか懐かしく温かみを感じられる書体です。Noto Serif JPだと冷たい印象になる場合にはこちらのフォントを使うと良いのではないでしょうか。ウエイトは今のところ一つだけなので、太字などを使う場合には他のフォントと併用する形になりそうですね。   【さわらび明朝】 https://fonts.google.com/specimen/Sawarabi+Mincho 便利に使えるグーグルフォントのオススメ書体まとめ こちらもさわらびゴシックと同じく、温かみを感じられる明朝体になっています。キャッチコピーなどに使うとより感情が伝わるデザインに仕上がりそうですね。縦書きのデザインで使ってみたいフォントですね。   【はんなり明朝】 https://googlefonts.github.io/japanese/#hannari 便利に使えるグーグルフォントのオススメ書体まとめ フリーフォントでも有名なので使ったことのある人も多いのではないでしょうか。ディスプレイフォントとしてでなくCDNのウェブフォントでも使えるようになったので、デザインの幅も広がりますね。形はオールド系の明朝体で、上品で柔らかな印象を与えることができるので、女性向けのデザインでもよく使われています。  
  今回はグーグルフォントについて、使いやすくて人気のオススメ書体についてまとめてみました。初めて使う方は是非参考にしてみてはいかがでしょうか。よく使う方も覚えておくと便利なので是非ブックマークしてくれると嬉しいですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram