はじめてのWebfonts

今までは、サイト上で意図したフォントを使うには PCに共通してインストールしてあるデバイスフォンを指定するか、 photoshopなどで画像として作る方法が主でした。 しかしCSS3からはwebfonts機能が搭載された […]

今までは、サイト上で意図したフォントを使うには
PCに共通してインストールしてあるデバイスフォンを指定するか、
photoshopなどで画像として作る方法が主でした。

しかしCSS3からはwebfonts機能が搭載されたので、
CSSのみで希望のフォントが使える様になりました。

まだ一般化するには時間がかかると思いますが、
webfontsの基本をまとめてみました。



  1. webfontsのメリット・デメリット
  2. webfontsで使えるフォントフォーマット
  3. Webfontの使い方 CSSの@font-faceを使う方法
  4. Webfontsの使い方 Webfontサービスを利用する方法
  5. Webfontサービス

webfontsのメリット・デメリット

CSSのみで希望のフォントを指定できるので、
非常にメリットが大きく思えますが、
まだまだ幾つかの問題もあります。

メリット デメリット
  • CSSのみでフォントの指定ができる
  • テキスト選択が出来る
  • 画像を作る必要がないので作業料が減る
  • 画像でないのでブラウザの文字拡大縮小に対応できる
  • 純粋なテキストなので画像よりもSEOで有利
  • フォントのフォーマットによって対応ブラウザが異なる
  • フォントのライセンスがまだまだ不明瞭
  • フォントデータを読み込むのにタイムラグが生じる
    (特に2バイトの日本語フォントでは顕著)

webfontsで使えるフォントフォーマット

TTF(TrueType) /OTF(OpenType)

デスクトップアプリケーションで使われているフォーマット。
最も手軽に導入できますが、フォント制作者が生のデータをサーバーに上げることに難色を示したので、
WOFFにその座を明け渡すことになりそうです。
Firefox3.5〜、Safari3〜が対応。

EOT (Embedded OpynType)

Microsoftがwebfonts向けに提唱。
Microsoftが提供している専用コンバートツール「Web Embedding Fonts Tool (WEFT)」で、
EOTファイルを作成することができます。
IE4〜対応。IE4以外のブラウザは非対応。

WOFF(Web Open Font Format)

今後のwebfontsの標準フォーマットになることが確定しています。
圧縮されているためデータが軽い。
基本的にwebサイトでのみ利用でき、デスクトップアプリケーションでは利用できないとして
ライセンスを分離している。
Firefox3.6〜、Chrome、Opera、IEも9から対応。

SVG Fonts

SVG(XMLベースのベクターグラフィックス言語)のフォント版。
iPhoneやiPadのSafariはTTFやOTFには非対応ですが、
唯一SVGには対応しています。
※iOS 4.2にてTTF形式に対応しました。

番外 JavascriptやFlashと組み合わせた方法

フォントファイルをjavascriptに変換し、テキストを任意のフォントで置き換えるCufon、
HTMLのテキストをjavascriptでflashデータに置き換えるsIFRなどもあります。
javascriptやFlashと組み合わせることで、
フォントフォーマットに左右されずにフォントを指定する方法もあります。
詳しくは下記のサイトが参考になります。
ウェブで任意の書体を使う方法まとめ【更新】 – フォントブログ

Webfontの使い方 CSSの@font-faceを使う方法

webfontsを利用するには@font-faceを使います。
@font-faceで任意のフォント名を作成し、
そのフォントを使いたい箇所のセレクタの属性で指定します。

@font-face{
font-family:'VitaminRegular';	/*任意のフォント名*/
src:url('VITAMIN_-webfont.woff') fromat('woff');	/*フォントファイルへのパス、フォーマット*/
}

#test{
font-family: VitaminRegular;	/*先ほどのフォント名*/
}

前述の通りブラウザによって使えるフォントフォーマットが異なりますので、
クロスブラウザに対応する場合は以下の様に書きます。

@font-face {
font-family:'VitaminRegular';
src: url('VITAMIN_-webfont.eot?iefix') format('eot'),/*ie6-8*/
url('VITAMIN_-webfont.woff') format('woff'),	/*Firefox,Chrome,Opera,IE9*/
url('VITAMIN_-webfont.ttf') format('truetype'),	/*safari*/
url('VITAMIN_-webfont.svg#webfontBW5C59cp') format('svg');	/*iphone/iPad*/
}

font-faceで使えるfontを紹介しているサイト

Web Fonts. Delivered ∗ Kernest

kernest

Font Squirrel | Download Hundreds of Free @font-face Fonts

WebFonts として利用できるフリーの和文フォント | ヨモツネット

yomotunet

Webfontsの使い方 Webfontサービスを利用する方法

フォントデータからユーザーのアカウントまで1つのサーバーで管理するサービスです。
このサービスを利用することで、ブラウザ別の指定やライセンスの確認など煩雑な作業をする手間が省けます。

web fonts service

下記の様な流れが多いです。
Webfontサービスに登録
→使用するフォントを選択
→発行されるjavascriptとcssを使用したいサイトに設定する

Webfontサービス

Fonts.com Web Fonts

fontscom

40以上の言語に対応してます。

利用方法は下記のサイトで詳しく紹介されてます。
ついにウェブでも有名書体が使える!Webフォントサービス Fonts.com Web Fonts β版が運用開始 – フォントブログ

Typekit

typekit

Adobeのfontも配布されてます。
twitter、New York Times、GIZMODO、WordPressでも採用実績があります。

使い方は下記のサイトが参考になります。
TypeKitで文字の表現が変わる!!フォント・クラウドの時代/Design/Webdesign – サイブリッジラボ

Google Web Fonts

googlefont

googleのWebfontサービス。

下記の記事が参考になります。
Google Font APIを試してみた。 – E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介

Fontdeck webfonts: Real fonts for your website

fontdeck

有料ですが、プレビューフォントは無料なので自サイトに入れて
どのように変わるのか確認できます。
そうして納得のいったものだけ購入できます。
javascript不要のタイプです。

Fonts Live

有料ですが、30日間のフリートライアルがあります。
Web Fonts in ActionではサイトのURLを入力すると指定したフォントに置き換えてでのプレビューが見れます。

デコもじ|ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪

デコもじ

貴重な日本語のWebfontです。

Add Comment

本文

  1. [...] 参考サイト Design Spaceさん :初めてのWebfonts Share/Bookmark [...]

PAGE TOP