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

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

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

人気フォントブログの「Typewolf」が、2015年までのGoogleフォントベスト30を発表しました。
これを見れば、使うべきGoogleフォントがひと目でわかります。
Googleフォントは商用無料で使えますし、WEBはもちろん、グラフィックでも使用できるので、ぜひともチェックしてみてくださいね。

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

「Typewolf」は、有益なフォント情報を発信している海外の人気ブログです。
このTypewolfでは例年、ベストオブGoogleフォントをまとめているのですが、今年もまとめてくれました。
Googleフォントって便利なんですが、数が多すぎて、選ぶ際に一苦労します。
でも、「Typewolf」の情報を見れば、今使用すべきGoogleフォントがひと目でわかるので、デザインの参考になると思います。
記事では、フォントのダウンロード先へのリンクだけでなく、フォントの詳しい例示などが豊富に掲載されています。
タイポグラフィを学ぶ上でも参考になりますよ。
ぜひともチェックしてみてください。

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

The 30 Best Free Google Fonts for 2015 → Typewolf

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またはグラフィックに利用してみてください。

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

  • 0
  • 0
  • 0
  • 0

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

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

要チェック!最近公開されたかっこいい無料の英語フリーフォント38(2013.9-2014.2)

要チェックです。 2013年9月〜2014年2月ごろにかけて公開された無料フォントのうち、デザイン

記事を読む

商用利用可!英語フリーフォント171:デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション

商用利用可!英語フリーフォント200+デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション

英語(欧文)のフリーフォントのなかでも、「これはぜひとももっておきたい」プロフェッショナルなフォント

記事を読む

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

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

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

記事を読む

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」を

記事を読む

「このフォントなんだろうなあ」がわかっちゃう!フォント利用者必読書「実例付き フォント字典」

「このフォントなんだろう?」がわかる!フォント利用者必読書「実例付き フォント字典」

フォント利用者必読の書が登場しました。 その名も「実例付きフォント字典」。 その名のとおり、実際

記事を読む

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

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

記事を読む

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

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

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

記事を読む

商用無料!デザイナーが選ぶミニマルデザインにマッチする無料の英語・欧文フリーフォント ベスト57

商用無料!デザイナーが選ぶミニマルデザインにマッチする無料の英語・欧文フリーフォント ベスト57

ミニマルデザインにマッチするデザイナーが選んだフリーの英語・欧文フォントをご紹介します。 ミニマル

記事を読む

デザイナーは知ってて当然?なド定番の欧文/英語フォント

デザイナーは知ってて当然?なド定番の欧文/英語フォント22

デザイナーなら知っていて当然?なド定番の欧文/英語フォントをご紹介します。 もちろん、ここに掲載し

記事を読む

美しい日本語フォントの組み合わせ!少ないフォントでも美しいデザインが可能になる「AcuCaseProject」がすごい!

美しい日本語フォントの組み合わせ!少ないフォントでも美しいデザインが可能になる「AcuCaseProject」がすごい!

美しい日本語フォントの組み合わせで、少ないフォントでも、より美しい日本語デザインを実現できる素晴らし

記事を読む