Webサイトで使われるフォント厳選16個 - Google Fonts 編
今回は1,000以上確認したWebサイトの中から、特に良く使われているGoogle Fontsを紹介します。フォントを使っているサイトも一緒に紹介しているので参考にしてみてください。
前提条件は以下です。
- 日本語と英語を両方使っているサイトで確認。
- 良く使われるNoto Sans JPとNoto Serif JPは除く
Webサイトで良く使われるGoogle Fonts
無料で利用できるGoogle Fonts。選べるフォントの種類や太さも多く、さらに高速表示に対応しているため利用しているWebサイトはとても多い。
Poppins … 7票
大文字と太文字で使われてることが多い印象。コーポレートサイトからデザイン系サイトまで幅広く使われている。
セクションとグローバルメニュー部分で使われている。全部大文字、太字で使用している。
sanwacompany ltd.
セクションとグローバルメニュー部分で使われている。全部大文字、太字で使用している。
高橋創税理士事務所
セクションとグローバルメニューで使われいる。すべて大文字。グローバルメニューでは太さはノーマル。
株式会社中村建材工業所
セクションとグローバルメニューで使われている。大文字と小文字のガチャ。italic体と太文字で表示。
写真と、ちょっといい暮らし
セクションとグローバルメニューで使われている。すべて大文字、太字で使用している。
NADO
グローバルメニューを含め、英文テキストエリアでも使われている。セクションタイトルはPlayfair Display。
TANGO CREATION PLATFOR
セクションとグローバルメニューに使われている。すべて大文字、太字で使用している。
スズザウルス
Montserrat … 7票
大人気フォントGothamに似ていることから使われることが多い。大文字でも小文字でも使える万能フォント。
セクションとグローバルメニュで使われている。すべて大文字、太字で使用している。
天創堂株式会社
セクションタイトルにPoppinsと一緒に使われている。大文字で、太さはノーマル。
sanwacompany ltd.
セクション、グローバルメニュー、数字など全体的に使われている。大文字で使用、太さはノーマル。
株式会社サーキュレーション
セクションタイトルや数字に使われている。すべて大文字、太字で使用。
株式会社ファイアープレイス
セクションタイトルに使われている。すべて大文字、太字で使用。
あおば会計事務所
セクションタイトル、グローバルメニュー、などサイト全体で使われている。大文字で使用。
株式会社グッドライフ
グローバルメビューと英文で使われている。大文字でも小文字とのガチャでも使っている。游ゴシック体とOpen sansが一緒に使われている。
KOMINKAN
Lato … 6票
癖がない分、他の要素をじゃましない。大文字で使われることが多い。太さはサイトの印象によって左右される。
セクションタイトル、グローバルメニューで使われている。大文字と小文字のガチャ。太さは400や100など細め。
UNDERLINE
セクションタイトル部分に小文字で使われている。太さは300と細め。グローバルメニューにはRoboto。
HONMIDO
セクションタイトル、グローバルメニューを含め、サイト全体で使われている。基本的に大文字で使用、太字。
koloha
セクションタイトル、グローバルメニューに使われている。すべて大文字で使用。
studio Tao
セクションタイトルは日本語で、そのサブフォントで使われている。大文字で使用、italic体。
河合電器製作所
セクションタイトル、グローバルメニューなどに使われている。大文字で使用、太字。
morinook
Playfair Display … 4票
癖があるが、柔らかさもあって個性を出したいときに使えるフォント。
セクションタイトルに使われている。グローバルメニューはPT Sans。大文字と小文字のガチャ。太字。
suncrea
セクションタイトルに使われている。大文字と小文字のガチャ。太字。細かいところはPoppins。
ポート株式会社（PORT INC.）採用ページ
セクションタイトル部分にすべて小文字で使われている。太字。グローバルメニューにはPoppins。
TANGO CREATION PLATFORM
セクションタイトルなど英語の部分で使われている。大文字だけの場合もあればガチャの場合もある。グローバルメニューはRoboto Mono。
EVE un BLUE
Overpass … 3票
大文字と小文字をあわせた形で使われることが多い。使われるときのフォントサイズは小さめ。
セクションタイトル部分やcopyrightに使われている。大文字と小文字のガチャ。縦型の数字の部分はOswald。
西野建設工業株式会社
サイト全体で使われている。大文字と小文字のガチャ。フォントサイズとしては小さい。
株式会社松徳工業所
サイト全体の細かい英語の部分で使われている。大文字と小文字のガチャ。
Screen
Roboto Slab … 2票
セクションタイトル、グローバルメニューに使われている。小文字で太文字。
株式会社スピッカート
サイト全体の英語の部分に使われている。
窪田塗装工業
Roboto … 2票
セクションタイトルと数字に使われている。タイトル部分が大文字で太字。
マリモ歯科
英語のテキスト部分に小さく使われている。
808TOKYO
Roboto Condensed … 2票
セクションタイトルに使われている。すべて大文字で太字。太さ300。数字の部分にも使われている。
グローバル総合商社 原田産業株式会社
セクションタイトルに使われている。すでも大文字で太字。
黒木テック工業株式会社
Oswald … 2票
セクションタイトルに使われている。大文字で太字。
株式会社ソルブレイン
セクションタイトルとグローバルメニューに使われている。大文字で太字。その他、数字でも使われている。
A1 international
Karla … 2票
セクションタイトル、グローバルメニューで使われている。大文字。太さは300。英文はEB Garamond。
Odai
セクションタイトル以外、グローバルメニューなどサイト全体で使われている。セクションタイトルはFutura Round Demi。
HIKARINA｜株式会社ヒカリナ
Didact Gothic … 2票
セクションタイトル、グローバルメニューなどサイト全体で使われている。大文字と小文字のガチャ。太さは500、600。
下町芸術祭
游ゴシック体と一緒に使われている。サイト全体の英語と数字部分。
株式会社古谷野工務店
おまけ - オススメ Google Fonts
使われている数は多くないですが、おしゃれなサイトで使われていたGoogle Fontsを紹介しておきます。
Heebo
サイト全体で使われている。大文字と小文字のガチャで使われていることが多い。太字。
one media
Raleway
サイト全体で使われている。大文字で太字。
株式会社Hyrax
Prompt
セクションタイトル、グローバルメニューなどサイト全体で使われている。大文字で太字。日本語も含め、全体的に太字で使っている。
Mimicry Design
Cardo
サイト全体で使われている。基本的には大文字。スタイリッシュだけど丸みもあるserif体。
Kenta Toshikura
さいごに
今回紹介したGoogle Fontsはすべて英語でしたが日本語のフォントもあります。特に良く使われる日本語フォントは以下の２つ。用意されているweightも多いです。
- Noto Sans JP … ゴシック系
- Noto Serif JP … 明朝系
WindowsとMacとでは標準で備わっているフォントに違いがあります。また共通のフォントがあってもブラウザによっても見え方が違ってくるので、フォントを綺麗に見せるために日本語のGoogle Fontsを使うことが多いです。
ただし日本語フォントはとても重いため、サイト全体で使うならローディング画面を実装するなど、表示させるまでに少し時間をあけたほうが良いでしょう。
