• かちびと.net

    Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ。調べ物をしたのでついでにメモ。css3の@font-faceを使ってWebフォントを使用する際のTipsやリソースのまとめです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ

スポンサーリンク

Webフォントに関して調べ物をしたので
個人的なメモ。少し利用頻度があがって
来たので探しやすいようにまとめておき
ます。まだちょっと使い慣れてないので
もう少し勉強しないとダメですね・・
スマフォ向けのリソースもあります。

というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。

最低限の知識

最低限かどうか分かりませんけどw 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。

ライセンス

まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。

Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。(アイコンなんかも同じなんですが)

こうしたリスクがあるため、フォントファウンダリ側に、その旨の使用許諾が必要になる場合もありますし、現に配布済みの使用許諾書にも影響が生じかねませんので無料で配布されてるからと言って簡単にWebフォントに利用する訳にも行かない、という事のようです(多分)。仮に再配布OKのフォントだとしても、=Webフォントに利用しても良いとは限りませんので注意が必要です。

最も確実なのはパブリックドメインのフォントを利用することです。著作権が切れていれば利用は自由、もちろんWebフォントにも使えますね。

利用法

何度かWebフォントに関して記事を書いてきましたが、少し古めの記事ですが安全な@font-faceの書き方という記事がとても分かりやすく勉強になりました。なぜ安全なのか、は元記事をご覧下さい。

記述法は以下。

@font-face {
  font-family: 'example';
  src: url(example.eot);
  src: local('example Regular'), local('example'),
         url(example.otf) format('opentype');
}

eotフォーマットはIE用となりますので、ttfやotfしか無い場合等は、これまたファウンダリ側にttfからeotへのコンバートの許可を得る必要がある可能性も出てきます。なかなか難しいですね。

また、以下のような書き方も見かけます。(参照:The New Bulletproof @Font-Face Syntax)

@font-face {
  font-family: 'example';
  src: url('example.eot?#iefix') format('eot'),  // for IE6-8
         url('example.woff') format('woff'), // for IE9, Firefox3.6+, Chrome6+
         url('example.ttf')  format('truetype'), // for Safari, iOS4.2+
         url('example.svg#svgFontName') format('svg'); // for others
}

この書き方の場合、IE9以下だと、src:を複数指定した場合、無視するバグがあるそうですが、拡張子の後に?を含めることでそれ以降の文字をクエリ文字として認識する為、最初のeotをフォントファイルとして認識してくれる、という事みたいです。IEがformat()を解釈できないから、では無いのかな?ちょっとよくわかりませんがIEは総じて困るよねという話。

woffというのはMozillaを含む多くのフォントファウンダリが共同で提案したWebフォント専用のフォーマットで、Google Font APIもこちらを採用しています。

Google Font APIのcssを見ると、このようにwoffだけを採用しています。もしかしてこのフォーマット一つでOKなんですかね・・

コメントいただきました!ありがとうございます!IEでcssを開くとちゃんとeotが読み込まれています。ブラウザで振り分けてたんですねー。素晴らしい。

@media screen {
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: normal;
  src: local('Anton'), url('http://themes.googleusercontent.com/static/fonts/anton/v2/tilmJBBU81h1G7ZsdY3Hmw.woff') format('woff');
}
}

woffだけでOKみたいな記事はちょっと見かけませんでしたが・・この辺勉強不足です。

多少もやもやしますが一応現状で、より確実な書き方は2番目の方法かなぁという結論に達しました。

使用例1

Patua Oneを使用しました→Google Web Fonts Patua One

I am Patua One

使用例2

Antonを使用しました。→Google Web Fonts Anton

I am Anton

メリットとデメリット

さて、Webフォントのメリットやデメリットはどうなんだ、という話ですが、なんとなく和文フォントをWebフォントで利用する、という事に関しては賛否で分かれる印象です。それは日本語圏である事も大きく関わっているかもしれません。

日本語フォントはその文字量の関係で基本的にサイズが大きく、例えWebフォントに利用できたとしてもファイルのロードに時間がかかります。

このロード時間を抑えるために、現状はサブセット化することで短縮しているようです。サブセット化・・というのは使う文字だけ残して後は削除する等してファイル数を減らす施工です。こうすることでロード時間の問題は多少解決できます。例えばフォントプラスというサービスは動的にサブセット化しているようです。

ページ内に必要な文字だけを抽出してデータを軽く。

フォントプラスのシステムはウェブサイトのページ内の文章を自動で解析。そのページ内に使われている文字だけを抽出し、軽量化したフォントデータを自動で作成します。不必要なデータを読み込まないことにより、ウェブサイトのダウンロードの時間を短縮できます。
(via:フォントプラス)

管理的な問題として汎用性に欠ける手動サブセット化ではなく、動的なサブセット化(jsが一般的みたいです)が必要になってくると思いますが、例えばHTML5のcanvas等に使うときはフォントファイルが事前にロードされている必要があるのに対し、jsによる動的なサブセット化では事前にロード出来ない事もあるようです。(参考:@IT)また、サブセット化するという事は当然加工に当たりますのでフォントファウンダリからの許可も必要となってきます。加工OKで2次配布もOK、誰にでもフォントファイルをダウンロードされてもOKな日本語フォント・・と考えるとやはりハードルは高そうですね。

その点、パブリックドメインの欧文フォントは数多く存在し、ファイルサイズも軽量、Webフォントとして許可されているフォントも多く存在します。普通に読み込めますのでcanvasの問題などもありません。日本語フォントでパブリックドメインのものは現状では無いと思いますが、あったとすればサブセット化も自由ですね。

メリットだけとは言えないものの、コンテンツを変更したいときにPhotoshopを立ち上げ、スライスし、画像をアップロードなどの手間を省けるという管理のしやすさ、検索エンジンフレンドリーな点、css3やjsなどで動的なエフェクトを表現出来る、コストや工数削減等、利用するメリットがあることも確かです。なので、今のうちから多少覚えておいても損はしないかなというのが個人的な見解です。まだ研究段階ですね。

さて、余談が長くなりましたが、以下がWebフォントの利用の際に役立ちそうなリソースサイトです。説明はあまり要らないサイトばかりなので適当に済ませています。

欧文フォント

Google Font API

最も利用されている印象です。GoogleでホスティングされているWebフォントで、自由に利用する事が出来ます。種類も400近くありますし、コードも出してくれるので楽で良いですね。

Google Font API

Open Font Library

パブリックドメインのフォントのみを収集しているサイトです。こちらのフォントも勿論Webフォントとして自由に利用する事が出来ます。コンバートもOK。
すみません、様々なライセンスのフォントがありました。それぞれご覧下さい。失礼致しました。

Open Font Library

Font Squirrel

Webフォントに利用できるフォントを配布しているサイト。一番見に行ってるかもしれません。

fontsquirrel

和文フォント

WebFonts として利用できるフリーの和文フォント

ピクセルグリッドの方の有益なまとめ記事です。よく紹介されているフォントを利用しても良いか、コンバートはOKか、サブセット化はOKか、なども書かれています。

WebFonts として利用できるフリーの和文フォント

M+ WEB FONTS

無料の日本語フォントとしても知られるM+がttfのみsourceforge.jpにてホスティングされており、Webフォントとして利用する事が出来ます。

M+ WEB FONTS

フォントプラス

先ほどご紹介したWebフォントの有料サービス。動的にサブセット化してくれるのでロードに時間がかかりにくいみたいです。

フォントプラス

モリサワ クラウドフォント

最も一般的に利用されている和文フォントブランドのモリサワが提供してくれる・・・はずなんですが、まだみたいですね。一応忘れないようにメモ。

モリサワ クラウドフォント

デコもじ

有名な日本語Webフォントサービス。勿論有料のサービスですが、無料で自由に試せるので無料プランから使ってみるといいかもですね。ただ、個人的な意見ですが僕はクライアントワークには利用しないと思います。

デコもじ

もじでぱ

デコもじ同様、有料の和文フォントサービスです。こちらも有料と無料プランがあります。こちらもクライアントワークには利用しないかな。

もじでぱ

ツール

WhatFont bookmark

僕も頻繁に使っていますが、Webサイト内で使用されているWebフォントの名前をサクッと調べられるブックマークレットです。これはオススメしています。

WhatFont bookmark

ttf2eot

ttfをIEに必要なeotフォーマットにコンバートしてくれるツールです。コンバート前にフォントのライセンスに注意してください。

ttf2eot

FF Subsetter

英字フォントのみですが、サブセット化してくれるツールだそうです。フォントブログさんで知りました。使い方も書いてくれています。

FF Subsetter

Web Font Specimen


Webフォントの様々なシーンでの見栄えを確認出来る、というもの。だそうです。(未検証)A List Apartで知りました。

Web Font Specimen

ROCKWELL


PCにインストールされているフォントでWeb上での表示確認が出来ます。

ROCKWELL

@FONT-FACE GENERATOR


先ほどのFont Squirrelが提供するコンバーターです。WOFFにも対応。2年前に記事を書きました

@FONT-FACE GENERATOR

JavaScript

Webフォントと併用するっぽいライブラリです。

LETTERING.JS

1文字づつspanでラップしてくれるライブラリ。楽しいことが出来そうです。:nth-child()と相性良さそうです。

LETTERING.JS

Kern.js

こちらはツールに入れるべきだったんですが、上記LETTERING.JS用のブックマークレットなのでこちらに。LETTERING.JS用にカーニングして、cssを吐き出すブックマークレットです。

Kern.js

FitText

ディスプレイの解像度に合わせてテキストサイズをフィットさせるライブラリ・・・使う予定はまだ無いですけどよく見かけますね。

FitText

Kerning.js

カーニング可能なライブラリ。以前ご紹介しましたのでご参照下さい。

Kerning.js

ギャラリー

Web Font Awards

Webフォントを利用しているWebサイトのデザインコンテストです。Galleryからいろいろ見れます。

Web Font Awards

the WEB FONTS gallery

こちらもデザインギャラリーです。以前ご紹介しました。

the WEB FONTS gallery

ギャラリー2個しかなかったw

前述したとおり、Webフォントに関してはメリットだけでなく、まだまだ問題を抱えている技術です。サイズの量、ライセンスだけでなく、見栄えもよく論点に上がりますので、Webフォント超オススメ!とは言いませんが、覚えて損は無い知識だなぁとも思いますし、Googleのおかげでかなり手軽に使えますので気が向いたら一度使ってみてはいかがでしょうか。

以上、Webフォントに関するTipsやツールのまとめでした。

URL :
TRB :

Comments & Trackbacks (9)

  1. @sada_h

    Google Web Fontsの出力するCSSですが、ブラウザによって異なる内容のCSSが出力されています。
    例えば以下のCSSをChromeで開いた場合と、IEで開いた場合では中身が異なります。
    http://fonts.googleapis.com/css?family=Patua+One
    IEの場合はEOTのファイルも指定されていると思います。さすがGoogle、という感じですよね。

    • シロ

      おおおお!本当だ!w

      結構感動しましたw なるほどー、無駄なファイルを読み込ませないよう配慮してくれてたんですね・・貴重なコメント有難う御座いましたー!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services