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/
こちらの記事も合わせてどうぞ
- Avenir Next Rounded — スタイリッシュな定番人気書体にラウンドバージョンが登場
- 海外のWebフォントサービスまとめ【2015年11月版】
- Webフォント (Webfonts) 2011年6月のニュース
- 改訂5版TrueTypeフォントパーフェクトコレクション — 有名・定番フォント500書体収録!
- Webフォント (Webfonts) 2011年3月のニュース
- 有名書体も使える! 必要な分だけ購入し自分で設置できる MyFonts Webフォント完全ガイド(日本語)
- Avenir / Avenir Next — Adrian Frutiger氏による洗練されたモダンなサンセリフ書体