読者です 読者をやめる 読者になる 読者になる

LITERALLY

知っておくと楽しい知識をまとめて紹介

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

デザイン

Webフォントとは

ページ中のテキストの表示に利用するフォントデータを指定した場所からダウンロードして適用できるようにするもの。Webフォントを使用すると、閲覧者のPCに指定のフォントが存在しない場合でも、インターネットでフォントデータを自動的に読み込んで表示させることができる。

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

 

Googleウェブフォントの導入の方法

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

ちなみにGoogleウェブフォントの使用法はこれらの記事が分かりやすい。

 

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

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

 

1. スマートなゴシック体「Questrial」

f:id:tsukuruiroiro:20140905153715p:plain

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

Google Fonts Questrial

  

2. 細く美しいフォント「Josefin Sans 」

f:id:tsukuruiroiro:20140905162611p:plain

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

Google Fonts Josefin Sans

 

3. 力強くオシャレな「Montserrat」

f:id:tsukuruiroiro:20140905163917p:plain

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

Google Fonts Montserrat

 

4. インパクトのあるデザインにしたければ「Rubik Mono One」

f:id:tsukuruiroiro:20140905164410p:plain

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

Google Fonts Rubik Mono One

 

5. ユニークで目を引くフォント「Days One」

f:id:tsukuruiroiro:20140905163451p:plain

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

Google Fonts Days One

  

6. うまく使うとオシャレな手書きフォント「Permanent Marker」

f:id:tsukuruiroiro:20140905160536p:plain

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

Google Fonts Permanent Marker

 

7. 雑に書いた感がカッコイイ「Rock Salt」

f:id:tsukuruiroiro:20140905164700p:plain

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

Google Fonts Rock Salt

 

9

f:id:tsukuruiroiro:20140905161449p:plain

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

Google Fonts Sorts Mill Goudy

 

9. 高級感・上質感を感じさせる明朝体フォント「Libre Baskerville」

f:id:tsukuruiroiro:20140905163128p:plain

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

Google Fonts Libre Baskerville

 

10. ファンシーなスケッチフォント「Fredericka」

f:id:tsukuruiroiro:20140905161838p:plain

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

Google Fonts Fredericka the Great

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

f:id:tsukuruiroiro:20140905162358p:plain

Google Fonts Cabin Sketch

 

11. ハロウィンに使えそうな不気味なフォント「Noifer」

f:id:tsukuruiroiro:20140905153331p:plain

フォントカラーをカラフルにすると良い感じに不気味になりそう。ページをハロウィン仕様にするときには良さそう。

Google Fonts Nosifer

 

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

 

関連記事