個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

Googleフォントのオススメがすぐわかる!Googleフォントを見つけやすく使いやすくするサービス10

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス9

GoogleフォントのオススメがすぐわかるGoogleフォントを見つけやすく使いやすくするサービスをご紹介。
Googleフォントは便利です。
WEBフォントはもちろん、グラフィックでも商用利用無料で利用できます!
これを活用しない手はありません。
しかし、Googleフォントの本家サイトは、見づらく、目的のフォントをみつけるのに時間がかかりすぎます。
そこで便利なサービスの活用です
うれしいことに、現在までに様々なサービスがリリースされています。
これらのサービスを利用すれば、Googleフォントをさらに見つけやすく、使いやすくなること請け合い。
WEB制作、デザインのご参考になれば幸いです。

Googleフォントの利用の仕方

Googleフォント用の便利なサービスをご紹介する前に、Googleフォントの利用の仕方をおさらいしておきましょう。

目的のフォントを見つける

Google Fontsのサイトで、まずは目的のフォントをみつけます。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

普段はこれに時間がかかりますので、これをもっと見つけやすくしようというのが今回の記事の趣旨です。
ですので、今回ご紹介しているサービスを知ってしまったあとは、この作業をすっ飛ばすことができます

見つけたフォントをWEBサイトで利用する

例えば、以下のフォント(Playfair Display)を見つけたとします。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

そうしたら、Quick Useボタンをクリックします。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

続いて、使用したいウェイトなどを選択します。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

画面下にある「3. Add this code to your website:」に表示されているコードをコピーします。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

コピーできたら、製作中のhtmlファイルなどのhead要素内にコピーします。

これで準備完了です。
あとは、適用したい要素に対してCSSで指定するだけです。

Googleフォントをダウンロードしてグラフィックなどで利用する場合

フォントを見つけて、一度コレクションに追加します。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

コレクションに追加できたら、画面下に表示されているUSEボタンをクリックします。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

ウェイトを選択して、ダウンロードボタンをクリックします。
以下のようなポップアップ画面が表示されるので、「Download the font families in your Collection as a .zip file」をクリックしてzipファイルになっているフォントをダウンロードします。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

あとは、通常通り、フォントをインストールするだけです。
Googleフォントはtrue typeフォント(.ttf)形式になっています。

紹介しているツール群で利用する場合

上記とほぼ一緒なのですが、リンク先が少し違うので、戸惑うかもしれません。
以下のツール群で、該当のフォントをクリックすると、以下のようなGoogleフォントのページが表示されます。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

フォントを利用するには、上または下にある「Open <font名> in Google Fonts」をクリックしてください。

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス

すると、先ほど説明したウェイトを選択する画面が表示されますので、同じような手順で、WEBまたはグラフィックに利用してみてください。

Hand-Picked Type from Google Fonts

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
Googleフォントで「美しい」組み合わせを例示してくれているサイトです。
使用しているフォントは、左上にフォント名のリンクがあるので、それをクリックすれば、Googleフォントのサイトに飛びます。
過去の記事「Googleフォントの美しいタイポグラフィに惚れぼれ! Google Web Fonts Typographic Project」でもご紹介しています。
Hand-Picked Type from Google Fonts

Fontpair

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
こちらも、Googleフォントで「美しい」組み合わせを例示してくれているサイトです。
セリフ+サンセリフ、サンセリフ+セリフ、サンセリフ+サンセリフ、筆記体+サンセリフなど、カテゴリー分けされて、見つけやすくなっています。
表示されているリンク名をクリックすると、Googleフォントのサイトに飛びます。
Fontpair

TypeSource

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」
「TypeSource」は、WEBデザインで使用できるGoogleフォントをHTML+CSS付きで表示してくれる便利なサービスです。
例示しているGoogleフォントのリンクは貼られていますが、わざわざGoogleフォントのサイトに行かずとも、その場でHTML+CSSで表示してくれるので利用する側にとって大変便利です。
なお、おすすめのGoogleフォントについては、定期的に追加されています。
メールアドレスを登録していれば、新しい組み合わせを知らせてくれるので便利です。
TypeSource

Type A

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
ユーザーにとって、マルチデバイスで「読みやすい」Googleフォントをピックアップしてくれているサイト。
サイト自体もレスポンシブ対応になっているので、実際にウインドウサイズを変えて、可読性をチェックしてみてください。
数自体は少ないですが、使用する目安として役立ちます。
通常なら、CSSをダウンロードできるようですが、私が試したところ、ダウンロードできませんでした。
Type A

Beautiful Web Type

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
サイト名どおり、Googleフォントで「美しい」フォントだけをピックアップしてくれているサイト。
表示されているテキストにリンクが貼られているで、そのまま該当のGoogleフォントに飛びます。
Beautiful Web Type

Typewolf

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
フォント情報を発信している有名ブログ。
Googleフォントで利用できるさまざまなタイプのフォントを、ベストとしてまとめてくれています。
フォントのリンクがあるので、そのまま該当のGoogleフォントに飛びます。
Top 30 Free Open-Source Web FontsTop 10 Serif + Sans-Serif Font Combos on Google FontsTop 10 Free Fonts That Aren’t on Google Fonts

Font Library

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
Googleフォントを細かいタグで検索できて、目的のGoogleフォントをすぐに見つけられる便利なライブラリー。
詳しい内容は過去の記事「Googleフォントをタグで検索できて目的のフォントをすぐに見つけられる「Font Library」」をご覧ください。
Font Library

Typecast

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
Googleフォントを使用するために、ディスプレイ上でどのように表示されるかを試せるサービス。
テキストサイズ、行間、画面サイズなど、細かく設定することが可能です。
試して気に入れば、htmlやCSSをダウンロードできます。
Typecast

Web Font Blender

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
サイト上で自由に組み合わせを試せるサービス。
フォントサイズや行間も、自由に変更できます。
気に入った組み合わせができたら、CSSを利用できます。
Web Font Blender

The Web Font Combinator

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス
こちらも、サイト上で自由に組み合わせを試せるサービス。
フォントサイズや行間も、自由に変更できます。
The Web Font Combinator

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 3
  • 13

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

Googleフォントを使った組み合わせを次々提案してくれる「Font Flame」

Googleフォントを使った組み合わせを次々提案してくれる「Font Flame」

Googleフォントを使った組み合わせを次々提案してくれる「Font Flame」。 提案された組

記事を読む

欧文/英語フォントがよくわかる!欧文/英語フォントの実例付きサイト「Fonts In Use」

必見!欧文/英語フォントがよくわかる欧文/英語フォントの実例付きサイト「Fonts In Use」

欧文/英語フォントの実例付きサイトご紹介します。 実例数、実に5346!  ものすごい数です。

記事を読む

チョークで書いたような無料のフリー欧文/英語フォント36

チョークで黒板に書いたような無料のフリー欧文/英語フォント36

黒板に手書きで書かれたタイポグラフィは、授業を受けるという原体験があるのか、見ている人を自然と引きつ

記事を読む

いちど食べたらやめれない!美味(ウマ)すぎるフードタイポグラフィがコレクションされた「FOOD TYPE」

食べることもタイポグラフィも大好きです。 では、その2つが同時に体感できるとしたら?  それはも

記事を読む

かっこ良くて様になる!商用無料で使える欧文/英語フリーWEBフォント54選

かっこ良くて様になる!商用無料で使える欧文/英語フリーWEBフォント54選

WEBフォントは便利で美しいから大好きです。 欧文のWEBフォントはGoogle Fontsをはじ

記事を読む

人気フォントブログ「Typewolf」が選ぶGoogleフォントベスト30(2015年版)

人気フォントブログ「Typewolf」が選ぶGoogleフォントベスト30(2015年版)

人気フォントブログの「Typewolf」が、2015年までのGoogleフォントベスト30を発表しま

記事を読む

Googleフォントの人気ランキグがすぐわかる!Googleフォントを人気順で探しやすくした「FontCDN」

Googleフォントが見つけやすい!Googleフォントを無限スクロールで探しやすくした「FontCDN」

Googleフォントを無限スクロールで探しやすくした「FontCDN」をご紹介。 Googleフォ

記事を読む

【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント

【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント114

フリーフォントを探すのは時間と手間がかかります。 これまでは、必要になったときだけググってフォント

記事を読む

商用利用可能な無料のWEBフォントアイコンセット「360 Web Font Icons」

個人でも商用でも無料で利用できる360個のフリーアイコンセット「360 Web Font Icons

記事を読む

2015年の英語/欧文無料フォントは即戦力!2015年フリーフォントベストヒット95

2015年の英語/欧文無料フォントは即戦力!2015年フリーフォントベストヒット93

気がつけば2015年も早11月。 ここ関西では木枯らし1号が吹き荒れました。 そこで今回は、20

記事を読む