2010.5.5 Wednesday - 22:05

ついにウェブでも有名書体が使える！Webフォントサービス Fonts.com Web Fonts β版が運用開始

TypekitやFontspringなどに続き、オンラインフォントショップFonts.comが、Webフォントサービス Fonts.com Web Fonts を開始しました。クラウド型フォント埋め込みサービスです。現在はβ版となっており、登録制でサービスを利用することができます。

【2010/9/22追記】有料プランが発表になりました。引き続き無料プランも継続されます（※2011年までバッヂ表示は免除されます）。

他のサービスに比べて、とにかくすごいのが有名書体を数多く取り扱うLinotype、Monotype、ITCの3社のフォントを使うことができるという点。Frutiger、Univers、DIN、Gill Sans、Serpentine、VAG Rounded、…あの書体、この書体何でもあります！現在は2,000書体以上が使えますが、今後もどんどん増えていく模様。これまで画像等でしか実現できなかったことが、CSS (+ Javascript)で実現できるようになりました。IEは4から対応しています。

そして何よりも注目なのが、英語以外にも中国語や韓国語、そして日本語にも対応してる点です。β版では平成明朝、平成角ゴシック、平成丸ゴシックの3書体6ウェイトが用意されていますが、今後どのような書体が追加されていくのでしょうか。こちらも楽しみです。

…では簡単にβ版試用の流れを説明してみます。

1. まずはサインアップし、招待を受けましょう

まずはFonts.com Web Fontsのサイトにアクセスし、右側にあるオレンジ色のボタン [Sign up for free] から、名前とメールアドレスを入力し、ライセンス同意書を確認し登録をします。

登録自体は無料です。しばらくすると、確認メール（Fonts.com Web Fonts beta request confirmation）、さらにその後に招待メール（Fonts.com Web Fonts beta invitation）が届きます。招待メールのほうにユーザー名とパスワードが書かれているので、再度サイトにアクセスし、こちらでログインをします。

ちなみにこのトップページ、すでにWebフォントが使われていることに気づきましたか？

2. ログイン後、プロジェクトを新規に作成します

Webフォントサービスのほとんどは、ドメインごとに管理されています。本サービスも同様に、まずはWebフォントを使いたいサイトを登録することからはじまります。“Project”から、プロジェクト名とそのURLを入力し、[Save Project] ボタンで完了させてください。

3. フォントを選び、プロジェクトに追加します

次に“Choose fonts”から、お好きなフォントを選びます。ジャンルから選ぶのもよし、デザイナーやファウンダリから選ぶもよし、すでに有名な書体が多く用意されていることに驚きます。選んだら [Add to project] ボタンを押して、プロジェクトに加えてください。

4. フォントを使うためのCSSセレクターの設定をします

次に“Work on style sheet”のステップに進みます。ここからはCSSなどウェブ制作の知識が必要となります。Selectorsの欄にクラス名ならば.hoge、ID名ならば#hoge、他h1、h2などを入力し、Add Selectorで追加をしてください。※CSSの技術的な話は割愛させていただきます。

追加後、左のプルダウンから先ほど選んだフォントを選択し、忘れずに [Save changes and update style sheet] ボタンを押して完了させてください。

5. 最後に<head>タグ内に専用のJavascriptを入れて完了

最後に“Publish”から、登録したサイト専用のJavascriptコードを<body>タグの直後に入れます。【追記】現在は<head>タグの間に記述する仕様になったみたいです。前述の通り、プロジェクト単位で管理されているため、他のサイトでは使うことができません。

今回β版に登録したアカウントは、本サービス時にはフリートライアルアカウントへと移行される予定です。よって引き続き無料で使うことができますが、本サービス時には変更があるかもしれません。また何かしら広告が入る可能性もあるそうです。

いずれにせよ Fonts.com Web Fonts は、今後Webフォントサービスのスタンダードになることは間違いないでしょう。
→ 海外のWebフォントサービスまとめ

Fonts.com Web Fonts
http://webfonts.fonts.com/

PAGE TOP