個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

無料の四角く角張ったフォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォントをご紹介します。 スクエアフォントは

記事を読む

ビンテージ風デザインに最適なフリーフォント!レトロな無料フォントベスト

ビンテージ風デザインに最適!レトロな無料フリーフォントベスト83

レトロな雰囲気やビンテージ風デザインにぴったり合いそうな、 無料で利用できるレトロ/ビンテージ風の

記事を読む

かすれ具合が人気のベストセラー英語/欧文フォント「Veneer」がセール&ディスカウント中

かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント中

かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント

記事を読む

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

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

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

記事を読む

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

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

記事を読む

プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18

プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい

記事を読む

英語・欧文のタイポグラフィなら おしゃれなアンパサンド"&"をチェック

英語・欧文の おしゃれなアンパサンド”&”をチェック

英語・欧文フォントの知っておきたい「おしゃれなアンパサンド"&"」をご紹介します。 アンパサンドは

記事を読む

オリジナルなアイコンフォントの作り方・使い方

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

Googleフォントを使ったタイポグラフィに惚れぼれ!「Google Web Fonts Typographic Project」

Googleフォントを使った美しいタイポグラフィに惚れぼれ!「Google Web Fonts Typographic Project」

Googleフォントを使った美しいタイポグラフィをご紹介します。 Googleフォントは無料で使え

記事を読む

無料で利用できるカッコイイ英語のフリーフォント85

和文用のフリーフォントは数が限られていますが、英語(欧文)のフリーフォントはたくさんの種類が公開され

記事を読む