webデザインの勉強

【Google fonts】webサイトに使えるおすすめ欧文フォント(無料)〜20選以上〜

【Google fonts】webサイトに使えるおすすめ欧文フォント〜20選以上〜の画像

こんにちは!webデザイナーのshioです^^

webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使えばいいか迷いますよね・・・
今回は私がwebサイトに良く使っているおすすめのGoogle fonts(欧文フォント)をご紹介します!

フォントもターゲットや与えたい印象に合わせた選択が必要なので、

  • どんな場面で使えるか
  • フォントが与える印象

もあわせてお伝えします。

Canvaで使えるフォントもありますよ^^

shio
shio
Google fontsの欧文フォントは特に種類が多いので、私自身もこの機会に整理したいと思いました。公開した記事ですが、これから追加したり見やすく整えたいと思っているので、ブックマークしてまた読みに来てくださると嬉しいです!

▼Googole fontsの日本語フォントにお困りの方はこちら

【Google fonts】webサイトに使えるおすすめ日本語フォント〜10選〜の画像
【Google fonts】webサイトに使えるおすすめ日本語フォント(無料)〜10選〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...

セリフ体

Lora

GoogleFontsのLoraの画像

「Lora」は美しいので、女性向けデザインにぴったりです。
実際私も「Lora」が使われているサイトを見たときに一目惚れしました!

おしゃれだけど可読性が高いので、本文にも見出しにも両方使えます。
結構使っている場面を見かけるので、人気のフォントだと思いますよ!

おしゃれ | 綺麗 | 女性向け

就活で使用した私のポートフォリオでは「Lora」と「Noto Serif Japanese」を使用しています。
「Noto Serif Japanese」も日本語のGoogle fontsです。
▼綺麗で優しい印象になりました。

Noto Serifとloraを使ったshioのポートフォリオの画像

実際のポートフォリオサイトはこちら

Cinzel

GoogleFontsのCinzelの画像

「Cinzel」はローマ時代の碑文に触発されて作られたフォントなので古典的・伝統的な雰囲気があります。
高級感もあるのでウェディングなどのデザインに使いたいですね。

高級感 | 綺麗 | 古典的

▼今回のアイキャッチの英語・数字に使用しました。

【Google fonts】webサイトに使えるおすすめ欧文フォント〜20選以上〜の画像

Cardo

GoogleFontsのCardoの画像

「Cardo」はスタイリッシュだけど丸みがあり、親しみやすさ可愛らしさも感じる不思議なフォントです。

親しみやすい| かわいい | スタイリッシュ

Cormorant Garamond

GoogleFontsのCormorant Garamondの画像

「Cormorant Garamond」は「Garamond」に影響を受け作られました。

優雅| 綺麗 | 古典的

▼Canvaのテンプレートで使用しました。
Canvaにも入ってるフォントです。

「Cormorant Garamond」を使ったCanvaのテンプレート

Sorts Mill Goudy

GoogleFontsのSorts Mill Goudyの画像

「Sorts Mill Goudy」は伝統的な綺麗系のフォントです。
こちらも「Garamond」に似ていますね。
線が柔らかく優しい雰囲気もあります。

優雅| 綺麗 | 古典的

私は税理士のwebサイトを作る際に使用しました。
綺麗で整った形から信頼感、「o」が丸いので親しみやすさも出せます。

Playfair Display

GoogleFontsのPlayfair Displayの画像

「Playfair Display」は細い部分と太い部分に差があるので女性らしさを感じるフォンントです。
丸みもあるので、綺麗だけど可愛らしさも出したいときに使えそうです。

かわいい| 綺麗 | 女性的

サンセリフ体

Google fontsはサンセリフがかなり充実していて、縦長系・インパクト系・かわいい系・丸っぽい系とさまざまな用途で使い分けられます!

Roboto

GoogleFontsのRobotoの画像

可読性が高く、洗練されたフォントで人気が高いです!
私は工場系のサイトをデザインする際に、迷ったら「Roboto」を使うことが多いです。
フォントも沢山揃っていて使いやすいフォントです。

かっこいい| 読みやすい | 可読性◎| ベーシック

Montserrat(横長)

GoogleFontsのMontserratの画像「Montserrat」はなんとウェイトが9つもあって、数字も綺麗で、読みやすく使いやすいです。
横長でどっしり感がありかっこいい!だけど可愛さも感じますよね。
webサイトでよく見かけるので、とても人気のフォントです。

かっこいい| 読みやすい | 横長| どっしり

shio
shio
私も何度も使用したフォントです。

Oswald (縦長)

GoogleFontsのOswaldの画像

DIN」に似ていて、綺麗で読みやすくクセのないフォント。
縦長でインパクトがあるので、タイトルに太くして使用すると良い感じにデザインできます。

綺麗| 読みやすい | 縦長| インパクト

▼Canvaのテンプレートで使用しました。
Canvaにも入ってるフォントです。

「Oswald」を使ったCanvaのテンプレート

このようにデザイン性のあるフォントをバンっと使ったときに、読みやすいOswaldをサブで使ってあげるとおしゃれで見やすくバランスがとれます。

Open Sans

GoogleFontsのOpen Sansの画像

クセのないフォントで、親しみやすさを出したいけど可愛くしたくないときに使えます!
ウェイトは沢山あり、可読性もあるので使いやすいです。
「ヘルベチカ」に似てます。

ベーシック| 読みやすい | 親しみやすい

Josefin Sans(幾何学的かわいい)

GoogleFontsのJosefinSansの画像

個人的に大好きなフォントです!
「Futura」に似て幾何学的なフォルムをしていて、「o」や「a」などがまんまるなところが可愛いです。
レトロ感もあります。

幾何学的| 可愛くておしゃれ| レトロ

「Josefin Slab」というサンセリフバージョンもあり、こちらも可愛いです。

▼Canvaのテンプレートで使用しました。
Canvaにも入ってるフォントです。

「Josefin Slab」を使ったCanvaのテンプレート

PT Sans

GoogleFontsのPT Sansの画像

ベーシックな形をしていますが、丸みがあり綺麗な優しい雰囲気もあります。

ベーシック| 優しい | 綺麗

Lato

GoogleFontsのLatoの画像

「Open Sans」「ヘルベチカ」と似ていて、癖がなく可読性が高い。
数字も綺麗で、使いやすいフォント。柔らかい雰囲気もあります。

ベーシック| 読みやすい | 親しみやすい

Poppins(太文字)

GoogleFontsのGoogleFontsのGoogleFontsのPoppinsの画像の画像の画像

ウェイトを太くすると迫力がでて賑やかに、ウェイトを細くすると「O」が丸いのでコロンとして可愛くなる不思議なフォント。
ウェイトの種類が豊富なので、いろいろ楽しんで使えます!

迫力| デザイン性 | ポップ

Anton (縦長)

GoogleFontsのAntonの画像

「Impact」に似ているフォント。
ウェイトは一つでかなり縦長です。

縦長| 迫力| かっこいい

Quicksand(丸っこい)

GoogleFontsのQuicksandの画像

サンセリフ体で柔らかい印象を出したいときに重宝します。
日本語の丸ゴシックみたいな位置付けで使えます。
可愛いけれど、癖がないので読みやすい。

親しみやすさ| 柔らかい| 可愛い

shio
shio
フォントに迷っている方へ。。。
デザインする際に文字数が多いときは縦長のフォントを文字間隔開けて配置し、
文字数が少ないときは「Josefin Sans」など「o」が丸いフォントや横長フォントを使うのがおすすめです!

筆記体

見出しなどのアクセントに筆記体を使うとおしゃれ感UPします。

Dancing Script

GoogleFontsのDancing Scriptの画像

Dancing Script」は名前の通り、文字が踊っているような筆記体ですよね。

Allura

GoogleFontsのAlluraの画像

「Allura」は私が初めて女性向けのwebサイトをデザインしたときに、沢山悩んで選択したフォントです。
個人的に思い入れがあります。
流れるような筆記体に美しさを感じます。

shio
shio
筆記体はまだまだおすすめフォントがあるので、追加していきます!

その他

Cabin Sketch

GoogleFontsのCabin Sketchの画像

Cabin Sketch」は手書き風のフォントです。
かすれているので味があるけれど、形は整っていて使いやすい。

Miltonian/Miltonian Tattoo

GoogleFontsのMiltonian/Miltonian Tattooの画像

Miltonian/Miltonian Tattoo」はレトロ感のある手書きフォントです。

おわりに

気になるフォントは見つかりましたか?
Google fontsには素敵なフォントがたくさんあるので、ターゲット・与えたい印象に合わせて使ってみてくださいね^^

▼Google fontsの日本語フォントの記事はこちら

【Google fonts】webサイトに使えるおすすめ日本語フォント〜10選〜の画像
【Google fonts】webサイトに使えるおすすめ日本語フォント(無料)〜10選〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...

▼Adobe fontsのおすすめフォントの記事はこちら

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...
【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー
【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts...
shio
shio
これで「Google fonts」「Adobe fonts」ともに日本語・欧文フォントをまとめることができました!
私自身もかなり頭の中が整理できて勉強になりました。
フォントの勉強をしたい方は自分なりにまとめてみると、フォントの引き出しが整理されてフォント探しが楽になりますよ^^
webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー