Web フォントを使ってみよう!~ライセンスフリーなWebフォントのまとめ~

Web フォントを使ってみよう!~ライセンスフリーなWebフォントのまとめ~

まさかの nakamura さんとの投稿かぶり!キー!!

さて夏は軽井沢辺りのコテージで、花火大会見ながらビールと枝豆を・・・というささいな夢がある若いおっさん Latin です。

今回はWeb フォントを少しピックアップしてみました。CSS3の本格的な実用化で、今後さらに使われるサイトが増えていきそうな気がしますね。

目次 Web フォントを使ってみよう!

Web フォントって何?

これまで、WEBサイト制作時に指定するフォントは、あくまでもクライアントサイド(訪問者のPC)にインストールされている必要があり、 いくらお洒落なフォントを使ったとしてもアクセスしてきたユーザーのPCにそのフォントがインストールされてなければ表示されず、 PC出荷時に標準でインストールされているような標準フォント(Windows だったらMS P ゴシック、Macだったらヒラギノetc)しか事実上、使われてきませんでした。

しかし、CSS3以降では「Webフォント機能」なる新しい機能が登場した事により、フォントデータをこちらのサーバーサイドで持っておく事で、 クライアントサイドでも指定したフォントでWebサイトを表示させる事ができるようになりました。
主要ブラウザでは既にこのWebフォント機能に対応しているので、あなたのWebサイトも着飾ってみては?!

Web フォントのメリット

  • 画像で補っていたオシャレフォントをテキストだけで実装できる。
  • CSSで指定している為、フォントを変えるだけでWebサイトの模様替えも容易。
  • テキストボリューム(量)が上がりSEO効果にも繋がる。

Web フォントのデメリット

  • ブラウザ毎で対応できるフォント形式が異なる為、変換したフォントデータを別途でアップしなければならない。
  • フォントデータの変換作業がめんどくさい。
  • ライセンス上の問題から、有料フォントは基本的にはほとんど使えない。

Web フォントを使ってみる

例えば、「example」というフォントデータがあったとします。
CSS3の「@font-face」の記述でフォントデータを読み込み、「font-family」プロパティで指定します。

フォントデータの「.ttf」の拡張子はTrue Typeフォントを意味しますので、CSSの方で format('truetype') で指定してあげます。
これだけ!

@font-face {
font-family: 'example';
src: url('../font/example.ttf') format('truetype');
}

h1 {
font-family: 'example';
}

利用可能なフォント形式

形式 拡張子 format()の指定値 概要
TrueType .ttf truetype WindowsやMacで使われる一般的なフォント形式
OpenType .ttf, .otf opentype PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる
WebOpenFontFormat
(WOFF)
.woff woff Web用の新しいフォント形式。データが軽いのが特徴。
EmbeddedOpenType
(EOT)
.eot embedded-opentype マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応
SVG Font .svg, .svgz svg SVGを利用したフォント形式

各ブラウザのWeb フォント対応状況

各ブラウザのWebフォント対応状況です。
前述した通り、ブラウザ毎に使えるフォントフォーマットが異なる為、任意のブラウザに形式を変換した専用のフォントデータをアップロードしておく必要があります。

ひとまずは、モダンブラウザで使えるTrue TypeもしくはOpen Type、IEで使えるEOT形式のフォントデータを用意しておけば良さそうです。
スマホサイトにも使いたい!という場合は、SVG形式のフォントデータをもう一つ用意しておけば良い感じでしょうか。
WOFF形式は容量も軽いですし、今後普及していくと思われるフォーマットですので、後々のメンテナンス等の手間を考えるとやはりこちらも容易しておいた方が良いかもしれません。

  TrueType
(.ttf)
OpenType
(.otf)
EOT
(.eot)
WOFF
(.woff)
SVG Font
(.svg)
IE 4~ × × × ×
IE 9~ × × ×
FireFox 3.5~ × × ×
FireFox 3.6~ × ×
Safari 3.1~ × ×
Chrome 4~ × ×
Chrome 6~ ×
Opera 10~ × ×
Opera 11.10~ ×
iOS4.0~ × × × ×
iOS4.2~ × ×
Android 2.2~ × × ×

Web フォントのフォーマット変換

フォントデータの形式を変換するサポートツールとして以下のようなものがあります。
作業自体は簡単ですので、任意のフォーマットに変換したフォントデータをサーバーへアップロードしてください。

◆TrueType形式→EOT形式
http://ttf2eot.sebastiankippe.com/

◆その他フォーマット変換
http://www.fontsquirrel.com/fontface/generator

ライセンスの取り扱い

デザインの現場で比較的よく用いられる有料フォントの大半はライセンスの制約が多く、Webフォントとしてほとんどは使う事ができないのが現状です。
ライセンスフリー、または一部有料のWebフォントサイトをご紹介。

◆fontsquirrel(無料)
http://www.fontsquirrel.com/fontface

120626nonaka-01.jpg

◆OPEN FONT LIBRARY(パブリックドメイン)
http://openfontlibrary.org/

120626nonaka-02.jpg

◆Fonts.com(無料・一部有料)
http://www.fonts.com/web-fonts

120626nonaka-03.jpg

◆Google Web Fonts(無料)
http://www.google.com/webfonts
Google が提供するWebフォントサービス。
フォントデータを用意したりアップロードしたりする手間もいらず、気軽にWebフォントを導入できる。

120626nonaka-04.jpg

◆モリサワ クラウドフォント(有料)
http://www.morisawa.co.jp/font/products/typesquare/
デザイン業務でよく使われるモリサワフォントもクラウドでWebフォントを提供しています。
しかし・・・やっぱりいい値段です・・・

120626nonaka-05.jpg

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ