2015/11/23
人気フォントブログ「Typewolf」が選ぶGoogleフォントベスト30(2015年版)
![人気フォントブログ「Typewolf」が選ぶGoogleフォントベスト30(2015年版)](https://co-jin.net/wp-content/uploads/2015/11/017.jpg)
人気フォントブログの「Typewolf」が、2015年までのGoogleフォントベスト30を発表しました。
これを見れば、使うべきGoogleフォントがひと目でわかります。
Googleフォントは商用無料で使えますし、WEBはもちろん、グラフィックでも使用できるので、ぜひともチェックしてみてくださいね。
人気フォントブログ「Typewolf」が選ぶGoogleフォントベスト30(2015年版)
「Typewolf」は、有益なフォント情報を発信している海外の人気ブログです。
このTypewolfでは例年、ベストオブGoogleフォントをまとめているのですが、今年もまとめてくれました。
Googleフォントって便利なんですが、数が多すぎて、選ぶ際に一苦労します。
でも、「Typewolf」の情報を見れば、今使用すべきGoogleフォントがひと目でわかるので、デザインの参考になると思います。
記事では、フォントのダウンロード先へのリンクだけでなく、フォントの詳しい例示などが豊富に掲載されています。
タイポグラフィを学ぶ上でも参考になりますよ。
ぜひともチェックしてみてください。
The 30 Best Free Google Fonts for 2015 → Typewolf
Googleフォントの利用の仕方
Googleフォント用の便利なサービスをご紹介する前に、Googleフォントの利用の仕方をおさらいしておきましょう。
目的のフォントを見つける
Google Fontsのサイトで、まずは目的のフォントをみつけます。
普段はこれに時間がかかりますので、これをもっと見つけやすくしようというのが今回の記事の趣旨です。
ですので、今回ご紹介しているサービスを知ってしまったあとは、この作業をすっ飛ばすことができます!
見つけたフォントをWEBサイトで利用する
例えば、以下のフォント(Playfair Display)を見つけたとします。
そうしたら、Quick Useボタンをクリックします。
続いて、使用したいウェイトなどを選択します。
画面下にある「3. Add this code to your website:」に表示されているコードをコピーします。
コピーできたら、製作中のhtmlファイルなどのhead要素内にコピーします。
1 2 3 4 |
<head> …… <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'> </head> |
これで準備完了です。
あとは、適用したい要素に対してCSSで指定するだけです。
1 2 3 4 |
p { font-family: 'Playfair Display', serif; font-size:13px; } |
Googleフォントをダウンロードしてグラフィックなどで利用する場合
フォントを見つけて、一度コレクションに追加します。
コレクションに追加できたら、画面下に表示されているUSEボタンをクリックします。
ウェイトを選択して、ダウンロードボタンをクリックします。
以下のようなポップアップ画面が表示されるので、「Download the font families in your Collection as a .zip file」をクリックしてzipファイルになっているフォントをダウンロードします。
あとは、通常通り、フォントをインストールするだけです。
Googleフォントはtrue typeフォント(.ttf)形式になっています。
紹介しているツール群で利用する場合
上記とほぼ一緒なのですが、リンク先が少し違うので、戸惑うかもしれません。
以下のツール群で、該当のフォントをクリックすると、以下のようなGoogleフォントのページが表示されます。
フォントを利用するには、上または下にある「Open <font名> in Google Fonts」をクリックしてください。
すると、先ほど説明したウェイトを選択する画面が表示されますので、同じような手順で、WEBまたはグラフィックに利用してみてください。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
無料で使えるテクノ/クリスタルフリー英語フォント90+
SFやクラブ関係、最先端・近未来的なテーマなどにマッチしそうなフォントといえばテクノフォントまたの名
-
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
-
無料で使える角丸・丸文字の英語/欧文フリーフォント28でポップでかわいい演出を
無料で使える角丸・丸文字の英語/欧文フリーフォントのご紹介します。 デザインにポップな印象やかわい
-
-
かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント中
かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント
-
-
タイトルや見出しで活躍する無料の英語/欧文フリーフォント82
タイトルや見出しで活躍する無料の英語/欧文フリーフォントをご紹介します。 私たち日本人が英語/欧文
-
-
2015年の英語/欧文無料フォントは即戦力!2015年フリーフォントベストヒット93
気がつけば2015年も早11月。 ここ関西では木枯らし1号が吹き荒れました。 そこで今回は、20
-
-
商用利用可!細字の英語・欧文フリーフォント74
商用利用可な細字の英語・欧文フリーフォントをご紹介します。 iOSのインターフェースには、やけに細
-
-
無料で利用できるカッコイイ英語のフリーフォント85
和文用のフリーフォントは数が限られていますが、英語(欧文)のフリーフォントはたくさんの種類が公開され
-
-
3000円で150万円の価値!欧文フォント本「TrueTypeフォント パーフェクトコレクション」は無料フォント以上だ
無料のフォントを探している皆様。 はたまた、ケチなクライアントや吝嗇家の経営者から「経費がかけられ
-
-
いちど食べたらやめれない!美味(ウマ)すぎるフードタイポグラフィがコレクションされた「FOOD TYPE」
食べることもタイポグラフィも大好きです。 では、その2つが同時に体感できるとしたら? それはも