読者です 読者をやめる 読者になる 読者になる

カスタマイズ好きなブロガーにおすすめのフリーフォント15選

ブログ運営 カスタマイズ

スポンサードリンク

f:id:ryosukedoi:20161107200259j:plain

ブログ開設当初はデザインの「デ」の字すらよくわかっていないド素人だった僕。ですが今では、それなりにオシャレなデザインに仕上げることが出来るようになりました。そこで、今回は導入すると他のブログと差別化できるフリーフォントを紹介したいと思います。

ブログのコンセプトを適切に伝えるためのフリーフォントを探そう

みなさんははてなブログを始めるときにどうやって個性のあるブログにしようかと考えた経験はありませんか。

はてなブログってデザインのテンプレートはあるものの、人気なテンプレートだと他人と被ってしまいがち。

出来れば、記事だけでなくデザインでオリジナリティを出したいところ。

どんなブログサービスでも同じですが、そもそも書体の自由度が少ないのでフォントの選択肢は少ないんですよね。

そこで、Webサイトでも目的とした表現を実現できるWebフォントについて調べてみました。

今回はWebフォントの基本からメリット・デメリット、そしてWEBフォントサイトとおすすめのフリーフォントをまとめてみました。

まずは、Webフォントの基本からおさらい。

Webフォントってどんなもの?

Webサーバ上にフォントファイルを置くことで、CSSを使って好きなフォントを表示できるのが、WEBフォント。

どのデバイスで見ても意図するフォントを表示できるようになるんです。Retinaディスプレイで見ても綺麗だったりとメリットが多いのが特徴。

なぜWebフォントを使うのか

ブログのブランディングにおいて、フォントを整えることは大切です。ブランディングをとても上手に行っているなと思うはてなブログを紹介しましょう。

フリーランスデザイナーを経て、現在は某外資系大手でプロダクトプランニングの仕事をしている人気ブロガーcatknows氏のブログ「LITERALLY」。

このようにWebフォントを使うことで、さまざまなデバイスでも読みやすいフォントで意図するデザインが可能になります。

また、意図したデザインを読みやすく見せることで、思い通りの印象をユーザに与えることができます。

実際に与えたイメージと、与えたいと思っているイメージを合致させるってなかなか難しいですよね。

Webフォントを使うメリット・デメリット

では、Webフォントを使うメリット・デメリットを整理していきます。

Webフォントのメリット

Webサーバーにフォントファイルを設置している分、どんな端末からでも意図する表現を実現できるという点が魅力。

修正もCSSからいじるだけなので、慣れている人ならさくさくできるはず。

どのデバイスでも同じフォントで表示できる
レスポンシブデザインに対応しやすい
意図する表現を実現できる

Webフォントのデメリット

僕が利用しているのは日本語・英語双方のWEBフォントを利用しているので、すこし表示速度は落ちました。

それでもフォントを含めて意図するデザインができているので良いと結論づけています。

ちなみに有料のWEBフォントもありますので利用する際は無料なのかどうか確認しましょう。

日本語のWEBフォントはデータが重く、ページの表示速度が遅い
英語のWEBフォントは選択肢が多く選ぶのに時間がかかる

WEBフォントサービス3選

実際に即実践したい方には以下の3つのサイトでフォントを探してみるのが良いでしょう。

フォントって奥深く、そして見ていて楽しいんです。

僕の場合は何時間もフォント探ししてしまうこともありました。

皆さんもお気をつけ下さい。

Google fonts

はてなブロガーがよく利用するWEBフォントといえばGoogle fontsです。

すべて無料で、ソースの読み込みも簡単。ソースを読み込むだけでIEにも対応。

fonts qurrel

全て無料。個性的なフォントを探す時に使いたいサイト。

fonts.com

海外では結構有名なWebフォントサイト。無料と有料プランがあります。

おすすめのフリーフォント15選

上記のWEBフォントだけでは表現しきれない!っていうマニアックな方には、フリーフォントがおすすめ。 もちろんブログにも利用できます。方法は一番最後に僕が参考にした記事を載せているのでチェックしてみてください。

Penna

f:id:ryosukedoi:20161107200305p:plain

当ブログのタイトルと本文以外の英字はPenna。絶妙な遊び心が感じられて好き。

Eunomia

f:id:ryosukedoi:20161107200306p:plain

当ブログのタイトル部分に使用。未来を感じさせてくれるフォント。

Ferrum

f:id:ryosukedoi:20161107200307p:plain

ファイナルファンタジーのロゴ風に見えるフォント。

Perfo

f:id:ryosukedoi:20161107200255j:plain

WEBサイトよりもプロダクトデザインに活かせそうなフォント。

Kirvy

f:id:ryosukedoi:20161107200303p:plain

シャープで美しい「Kirvy」。それなのにインクで印字されたようなヌメッとした印象も。

Break

f:id:ryosukedoi:20161107200304p:plain

曲線美にほれぼれするフォント。タイトルに使うと印象的です。

Bavro

f:id:ryosukedoi:20161107200257j:plain

BとRが特徴のフォント。

Kanji

f:id:ryosukedoi:20161107200258j:plain

上記のようにグラデーションで使うとよりアートに。

Loew

f:id:ryosukedoi:20161107200259j:plain

シンプルですごく読みやすいし、かわいい。

Wayward

f:id:ryosukedoi:20161107203118p:plain

これはWEBで使うと味わいがありますなー。

Manifest

f:id:ryosukedoi:20161107203128j:plain

アンバランス感がすごく好きなフォント。

Anders

f:id:ryosukedoi:20161107203207p:plain

幾何学的な印象が特徴。

Good night

f:id:ryosukedoi:20161107200302p:plain

署名やサイン等の部分で利用すると面白いかも。

eco font

f:id:ryosukedoi:20161107200300p:plain

まんまるなのがかわいい。

Francisco

f:id:ryosukedoi:20161107200301p:plain

少し縦長で可読性が高いフォント。

フリーフォントをWEBフォント化する方法

これらフリーフォントも、WEBフォント化させてしまえば、ブログでも利用することが出来ます。 以下のサイトはその方法を分かりやすく解説してくれているので参考にしましょう。

brian.hatenablog.jp