ウェブフォントとは

※音声がございます。音量にご注意ください。

iPhone

Android

xperia

HTC

iPad

2012年にもなり、スマートフォンや、タブレット端末の普及に伴い、
HTML5の要素使ったページも、珍しくなくなりました。

Flash

Flash

モバイル用

   開発中止!!

Flashが、モバイル用の開発を中止すると、発表したことにより、 モバイルの分野を中心に、ますますHTML5の需要が高まると想像されています。

個人的な話なのですが、最近HTML5でサイトを作成してほしいと頼まれ、四苦八苦することがありました。

そこで、CSS3のfont-faceを使用した、ウェブフォントの現状について、いくつか学べることがあったので、 今回は、それについての解説を、CSS3のアニメーションで作成してみました。

ウェブフォントとは、CSSのfont-familyプロパティを利用し、Webページ上のテキストに対して、 様々なフォントを、適用できる仕組みのことです。

a

@font-face {
  font-family: sample_font;
  src: url('../fonts/○○.ttf');
}

CSS3の@font-faceの登場により、フォントファイルさえあれば、どんなフォントでも、webページ上で適用できるようになりました。

src: url('../fonts/○○.ttf');
      ↑
パスが丸わかりになってしまいます。

しかし、ウェブフォントを利用するということは、フォントファイルをサーバーに置くことになり、 フォントファイルの、再配布に近い状態となってしまいます。

※2次配布は
ほとんどのところが禁止しています

そのため、フォントのライセンスに注意しなくてはならず、市販のフォントはほぼ利用不可能、 著作権フリーのフォントであっても、再配布を禁止しているものは多数あります。

Flashでは、文字をswf内に埋め込むことで、問題なく様々なフォントを使用することができましたが、 HTML5、CSS3で、ウェブフォントに利用する際は、ライセンスなどに気をつける必要があります。

OTF形式などでも使えます。

font-faceは、TTF形式などの、パソコンにインストールして使用する形式でも利用できますが、

※2012年現在、HTML5やCSS3と同じように、まだ策定途中です。
なので、仕様とかいろいろ変わるかもしれません。

現在、「WOFF」という、ウェブフォント専用形式のフォント仕様が策定途中で、最新ブラウザの多くは、WOFF形式に対応しています。

※woffにすることで、著作権などの細かな情報も組み込むことができます。

Web専用の形式にすることで、ファイル容量が減る、第三者によりダウンロードされ、パソコン上での二次利用を防げる、などの利点があります。

WOFFコンバータ
@FONT-FACE GENERATOR
などなど、いろいろあります。

TTFをWOFFに変換する、様々なサービスも、多く存在しています。

ただし、いくらWOFF形式といっても、和文フォントは文字数が多いため、ほとんどの場合にファイル容量が1MBを超えてしまいます。 和文フォントを多数利用する際は、注意する必要があります。

Google Web Fonts
TypeSquare
といったサービスが有名です。

また、自分のサーバに置くのではなく、Webフォントのホスティングサービスも存在します。

使っている文字のフォントだけをダウンロードし、データ量を少なくて済ませるサブセット化という、手法もあります。

サービスによっては、ページ内の文章を自動で解析し、使われている文字のデータだけをダウンロードしてくれる機能もあり、 和文フォントにも適しているようです。

SEOや視覚障害者向けのブラウザ対応にも、役立てる可能性があります。

ウェブフォントを利用すれば、テキストを画像化する、といった手法を減らすことができますし、 動的に出力されるテキストに対し、より豊かな表現を付与することもできます。

フォント以外にも、HTML5では音楽などもダウンロード可能なため、注意が必要です。

しかし、ライセンスの問題など、注意しなくてはならない問題も多く存在します。

個人的意見です。

最後に、今回のウェブフォントなどを調べ、感じた私の感想なのですが、

新しい技術などが出てきた際、その周りにある、様々な問題を理解し、 解決作を考えていく工程で、改めてどの技術を使用するのか、考えられるようになることが、

このサイトを見てくださった方の、何かのきっかけになれれば幸いです。

今のインターネット界、エンジニアのみでなく、デザイナー、企画にも求められているのだと思います。

ご清聴ありがとうございました。

【参考サイト】
HTML5ではゲームが作れない
第4回 CSS3のWebフォントを使ってみよう
HTML5&CSS3入門 with HTML5 パック 第4回 @font-face(ウェブフォント)の利用

※以前作成した FlashとHTML5と… もよろしければご覧ください。

Copyright © 2012 - Tatsuaki Suzuki.

TypeSquareのクラウドフォントを利用させていただいておりますが、ウェブフォントとという表現の方が世間的に一般のため、ウェブフォントという名称で説明をしています。