このフォントは画像に見えるけど実はテキストです。
文字列をマウスでドラッグしてみよう、なんとこの文字列はコピーができる。
こういうフォントはこれまで画像を使って作るしかなかったんだけれど、
今ではテキストとして表示させることができる。
テキストとして表示できるということは色を変えたりサイズを変えたり、もちろんテキストの内容を変えるのも簡単。
cssで装飾を工夫すればそれこそ見出しとして目立つテキストにすることが可能なんです。

見出しの文字列を変更してほしいという依頼に、
画像だったらわざわざ画像ファイルを開いて、文字を修正して保存して、画像を切り取ってファイルをアップして・・・って文字を１つ変えるだけなのにえらい時間がかかりますよね。
変更に対するこの手間の差はWEBの運営上は非常に重要で、できることならすべて文字をテキスト化してしまいたいと思うくらいです。

実際にWebフォントをうまく利用して、サイトの世界観を出しているサイトもあります。
映画の言葉

通常WEB上で表示されているフォントっていうのは、閲覧しているユーザーのパソコンに入っているフォントを使っているので、閲覧ユーザーが持っていないフォントは使えなかった。
だから、こういった魅力的なフォントを使うことができなかった。
WordやExcelで気軽に使えるいろんなフォントだって、Officeが入っているから使えるのであって、使えないユーザーはたくさんいるんですね。
どのユーザーのパソコンでも問題なくみられるフォントは本当に限られています。

だから、これまではホームページ制作者が勝手にフォントを決めれるわけではなかったんだけれど、WEBフォントが一般的になってきて、かっこいいフォントを使うことができるようになりました。
まだまだ課題もあるんだけれど、うまく使えるとすごい効果的ですよ。

• WEBフォントのメリット
• WEBフォントの使い方

WEBフォントのメリット

冒頭で書いたけれど、WEBフォントを使うと見た目は画像のようにかっこいいんだけれど実はテキストで、
テキストのメリットをそのまま受けられます。

• 文字の色を簡単に変えられる

  Welcome to my blog

  文字の色を変えるのはCSSのcolorを変更するだけ。

• 文字のサイズを簡単に変えられる

  Welcome to my blog

  文字のサイズを変えるのはCSSのfont-sizeを変更する
  しかもサイズをいくら大きくしてもきい！
  retina対応とかで画像を２倍で作らないといけないとかもちろんない。

• テキストの変更が超簡単

  もちろん、変更はすぐにできる。
  .htmlファイルをそのまま触ればいいだけだから。

• テキストなのでコピペができる

  画像はもちろんコピーなんてできませんが、テキストなのでコピーできてしまう。
  そのままテキストエディタに貼り付けられます。
  これって結構大事だよね。

• 検索キーワードになる

  テキストなので検索キーワードになる。
  むちゃくちゃ長い文章を画像で作って貼り付けている人もいるけれど、せっかくの文章が検索対象になっていないのはもったいない。
  Webフォントはもちろんテキストなので検索キーワードの対象になります。

と、メリットがいっぱいのWebフォント。
とにかく文字の編集が簡単っていうのがいい！

WEBフォントの使い方

とにかくまずは使ってみよう。

STEP1:フォントを用意する

まずはフォントを用意します。
フォントを用意って何？
いきなりフォントを用意してって言われても困りますね。
どうやって用意したらいいのか。
フォントはタダと思ってはいけない。
デザイナーにたかがフォントなんて言ってはいけませんよ、嫌われるから（笑）。

「フォントって字でしょ？」衝撃のセリフに反応するWeb業界

フォントってむちゃくちゃ奥が深いし、ただの文字だと思っている人多いけれど、
フォント１つ作るのにすごい時間がかかっています。
デザイナーはフォントをお金を出して買って使っているということも知っておいてください。

でも、そんなフォントをタダで配布してくれるところもあるわけです。

無料で自由に使えるフォントがこんなに！漢字の入ったフリーの日本語フォント

ほんと素晴らしい。
こういったところでフォントを無料でダウンロードできちゃいます。
早速気に入ったフォントをダウンロードして使いましょう。

STEP2:フォントファイルをアップロード

後で詳しく説明しますが、Webフォントを使うにはそのフォントの情報をどこかから持ってこないといけないです。
だから、使いたいフォントはサーバーにアップしておかないといけません。
後でCSSから参照するので、「font」フォルダとかわかりやすい場所にアップします。

STEP3:font-faceで使用するフォントを読み込む

以下の指定をするだけ。

@font-face {
    font-family: 'フォントファミリー名';
    src: url('フォント名.ttf') format('truetype');
}

やってることは難しくないけれど、
font-faceについて知っておかないとちょっと難しいかも。
font-faceについてはこちら。
CSS3 – @font-faceでかっこいいWebフォントを使う方法

STEP4:font-familyでフォントを指定する

あとは普段使っているように、
適用したい要素にfont-familyでフォントを指定する。
手順さえ覚えてしまえば簡単です。

Google Fontsを使えばもっと簡単

準備してしまえばどうってことないけど、それでも初心者には結構面倒。
もっと初心者向けに簡単にできないの？
さらに簡単にWebフォントが使える方法があって、それがGoogleFonts。
Googleはいつでも便利なものを提供してくれるね。

GOOGLEフォントを利用して、超簡単にWEBフォントを使おう！

Webフォントにもデメリットが

Webフォントはいいことばかりのように書いてきたけれど、
実際にはデメリットもあって、それがフォントのダウンロードの時間。

これまでの通常のフォントは、パソコンの中に既にインストールされているフォントを使用していたのでフォントのダウンロードとか必要なかったけれど、
Webフォントっていうのは一度パソコンからフォントをダウンロードしてきて表示している（それが@font-faceの指定ね）ので、フォントを一度ダウンロードしないといけない。
日本語っていうのはやっかいで、文字がとっても多い。
ひらがな、かたかなはもちろん、漢字がむちゃくちゃ多い（常用漢字だけで2136字）のでデータ量が大きくなってしまう。
英語なんかだとアルファベットの文字数が26しかないのでダウンロードはもちろん、作るのだって簡単。
作るのが簡単ということは無料のものも多くて、アルファベットのWebフォントはたくさんみつかる。
それに比べて日本語フォントは上で紹介したような無料のものもあるけれど、まだまだフォント=有料という印象が強いです。
だから、海外ではよく使われるWebフォントも日本ではなかなか普及しない。
そんな事情もあるけれど、Webフォントはうまく使えば非常にメリットの大きいものなので、
特に英語フォントに限って使うようにするとか、後で紹介するアイコンフォントなんかもとっても使いやすい。
デメリットもあるので、むやみに多用せずにうまく使えるようにしたいですね。

デザインにこだわるなら有料フォントもチェック

無料のフォントを紹介したけれど、
もっといろんなフォントを使いたければ、
有料で有名なフォントを提供しているサイトもあります。
もっともっとフォントにこだわるなら、こういったサイトを利用するのもいいです。
大手で使用されているフォントもたくさんあります。

有料フォントサイト紹介

アルファベットフォントも活用しよう

アルファベットだけなら日本語と比べ物にならないほどの無料フォントがあります。
記号とかもあるけれど、作る側は基本２６文字に注力すればいいからね。

Best of 2015: 100 Free Fonts for Designers

とかみてみると、英語だとほんとに多彩なデザインのフォントが配布されているのがわかりますね。

文字だけじゃないアイコンだってフォントになる！

実はこのWebフォントは、単なる文字としてじゃなくてアイコンとしても使えてしまいます。
普段使っている文字も広い意味では文字の形をしたアイコン。
文字の代わりにアイコンの形をしたものをフォントのセットにしてしまえば、
アイコンフォントとして使えます。

見た目はアイコンだけれど、初めに紹介したメリットはそのまま。
つまり、色を変えたりサイズを変えたり簡単にできてしまいます。
画像じゃないので、サイズを大きくしても読み込みに余計な時間がかかったり、
見た目が汚くなったりしなくてとってもスムーズ。

よく使うアイコンは、こういったアイコンフォントを活用するととっても便利です。
リストの先頭に「まる→●」とか「ほし→★」とかで変換して使ってる人も多いと思いますが、
アイコンフォントを使えば、もっとおしゃれなリストができるので楽しいです。

アイコンフォントを探すならまずチェックしたい無料配布の９サイト

Webフォントを使って、もっとホームページを効果的に作りましょう。