Literally

デザイン・海外・アイデアについて書きます。

ウェブページを一瞬でオシャレにするオススメのGoogle Web Fontsを厳選してみた

WEBフォントを知らない人は結構多いと思うので、まずはざっくりと説明する。

Webフォント

ページ中のテキストの表示に利用するフォントデータを指定した場所からダウンロードして適用できるようにするもの。

Webフォントを使用すると、閲覧者のPCに指定のフォントが存在しない場合でも、インターネットでフォントデータを自動的に読み込んで表示させることができる。

ウェブデザインに興味がなければ「ウェブページのフォントを簡単に、オシャレにカッコよく表示できる」ということだけ知っておけば十分かもしれない。

プログラミンができなくても、ウェブフォントを使うことは簡単だ。フォントを変えるだけでウェブページの印象はガラッと変わる。ブログ運営者の方、ホームページ更新に関わる方は知っておいて損はないはずだ。

ちなみにはてなブログでのGoogleウェブフォントの使用法はこのページが分かりやすかった。

今回は600近くあるGoogle Web Fontsからカッコよくて、オススメのWebフォントをまとめることにする。現状、英語しかないが、英語を変えるだけで思った以上に雰囲気は変わるものだ。

ウェブページをおしゃれにするオススメGoogle Web Fonts

Questrial

f:id:tsukuruiroiro:20140905153715p:plain

グローバルメニューやサイドタイトルなどで使うとオシャレにキマりそう。

Google Fonts Questrial

  

Josefin Sans 

f:id:tsukuruiroiro:20140905162611p:plain

控えめでかわいいウェブフォント。白の背景によく合いそう。

Google Fonts Josefin Sans

 

Montserrat

f:id:tsukuruiroiro:20140905163917p:plain

ゴシック調だが、少し丸めでかわいい印象。小文字になると全体的に丸っこい。大文字のほうがそのあたりのバランスがとれている気がする。

Google Fonts Montserrat

 

Rubik Mono One

f:id:tsukuruiroiro:20140905164410p:plain

情報が多く詰め込まれているようなゴリゴリのウェブサイトに。

Google Fonts Rubik Mono One

 

Days One

f:id:tsukuruiroiro:20140905163451p:plain

使えば目立つ、太めのフォント。「A」の形が印象的。

Google Fonts Days One

  

Permanent Marker

f:id:tsukuruiroiro:20140905160536p:plain

筆で書き殴ったような力強いウェブフォント。かっこいい使いすぎると、くどくなるので注意。

Google Fonts Permanent Marker

 

Rock Salt

f:id:tsukuruiroiro:20140905164700p:plain

テキトーに書かれた感じがかっこいい手書きフォント。サイトタイトルなどに使いたい。

Google Fonts Rock Salt

 

Sorts Mill Goudy

f:id:tsukuruiroiro:20140905161449p:plain

明朝体系統でシンプルに洗練されたウェブデザインにしたいときに。

Google Fonts Sorts Mill Goudy

 

Libre Baskerville

f:id:tsukuruiroiro:20140905163128p:plain

先ほどのSorts Mill Goudyに比べると少し太く、力強さのある明朝体フォント。

Google Fonts Libre Baskerville

 

Fredericka

f:id:tsukuruiroiro:20140905161838p:plain

スケッチ調の明朝体ウェブフォント。文字を荒く塗りつぶした感じが格好良い。いろんな配色を試してみたいところ。

Google Fonts Fredericka the Great

スケッチフォントのゴシック・バージョンはこちら。

f:id:tsukuruiroiro:20140905162358p:plain

Google Fonts Cabin Sketch

 

Noifer

f:id:tsukuruiroiro:20140905153331p:plain

ページをハロウィン仕様にする際に…。

Google Fonts Nosifer

 

その他、google ウェブフォントはこちらから。

関連記事