個人的に役立ったデザイン素材や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
  • 0

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

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

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

コミカルでポップ!無料の欧文コミックフリーフォント/英語マンガフリーフォント70

無料の欧文コミックフリーフォント/英語マンガフリーフォント70

無料の欧文コミックフリーフォント/英語マンガフリーフォントを70集めてみました。 フリーフォントで

記事を読む

無料で日本語WEBフォントが実装できる「Japont」が有難すぎる!

無料で日本語WEBフォントが実装できる「Japont」が有難すぎる!

日本語のWEBフォントが無料で利用できてしまうサービスを個人の方がリリースしましたのでご紹介。 こ

記事を読む

ロゴデザインや見出しに最適!無料で使える欧文/英語フリーフォント

ロゴデザインや見出しに最適!無料で使える欧文/英語フリーフォント83

ロゴをデザインするとき、既存のフォントをベースに作成することになるケースが多いと思います。 しかし

記事を読む

ロゴ制作などに役立つ無料の英語フリーグリッドフォント29

グリッドフォントというフォントは日本ではなじみのないフォントですが、海外のフリーフォント公開サイトで

記事を読む

エレガントで美しい無料のスクリプト筆記体フリーフォント55+

エレガントで美しい無料のスクリプト筆記体フリーフォントをまとめてみました。 ウェディング・結婚式や

記事を読む

無料で使える英語/欧文のインライン(二重線)フリーフォント

無料で使える英語/欧文のインライン(二重線)フリーフォント21

無料で使える英語/欧文のインラインフォント=二重線が入ったフリーフォントをご紹介します。 デザイン

記事を読む

世界中のWEBデザイナーに愛される定番の英語フォントベスト10(フリー&有料)

世界中のWEBデザイナーに愛されるド定番の欧文フォントベストに関するインフォグラフィックスがあったの

記事を読む