このページは Cloud Translation API によって翻訳されました。

@font-face を使用したウェブフォントのクイックガイド

Paul Irish

はじめに

CSS3 の @font-face 機能を使用すると、カスタム書体をウェブ上で使いやすく、操作しやすく、スケーラブルな方法で使用できるようになります。しかし、「Cufon と sIFR を採用し、画像内でテキストを使用するのに、なぜ @font-face を使用するのか」という問いかけになるかもしれません。カスタムフォントに @font-face を利用するメリットは次のとおりです。

Find（ctrl-F）による完全な検索可能性
スクリーンリーダーなどの支援技術へのアクセス
ブラウザ内翻訳または翻訳サービスを使用してテキストを翻訳できる
CSS には、タイポグラフィカルの表示（line-height、letter-spacing、text-shadow、text-align）とセレクタ（::first-letter、::first-line など）を完全に調整できる機能があります。

@font-face の概要

最も基本的なことで、使用する新しいカスタムリモートフォントを次のように宣言します。

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

次に、これを使用します。

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

この @font-face 宣言では、font-family プロパティを使用してフォントに明示的に名前を付けています。フォントの実際の名前に関係なく、任意の値を指定できます。font-family: 'SuperDuperComicSans'; は問題なく機能しますが、ご自身の評判には合わないかもしれません。src プロパティで、ブラウザがフォントアセットを見つけることができる場所を指定します。ブラウザに応じて、eot、ttf、otf、svg、またはフォントデータ全体をインラインで埋め込むデータ URI などのフォントタイプを使用できます。

	otf と ttf	svg	woff	EOT
IE	IE9		IE9	IE5 以降
Firefox	FF3.5	FF3.5	FF3.6
Chrome	Chrome 4	Chrome 0.3	Chrome 5
Safari	3.1	3.1
オペラ	Opera 10.00	オペラ 9
iOS		iOS 1
Android	2.2

もちろん、これほど単純なものはありません。上記のコードの最初の制限は、IE 6 ～ 8 に対して EOT を配信しないことでした。bulletproof @font-face 構文はこの問題の解決法を提案しており、以下で堅牢なバージョンを紹介します。

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('&#9786;'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

まだ頭が痛いの？すぐに利用を開始したい場合は、Font Squirrel Generator をおすすめします。このツールは、フォントを取得して、そのバリエーションと CSS を準備するプロセス全体を簡素化します。ウェブフォントを実際に活用するには、このテクノロジーが不可欠です。

モバイルサポートの有無

Mobile Safari は iOS 3.1 以降で SVG ウェブフォントをサポートし、Android はバージョン 2.2 から otf/ttf をサポートしています。しかし、この改善されたタイポグラフィエクスペリエンスは、モバイルユーザーに提供されるべきでしょうか。いいえ、おすすめしません。その主な理由は、カスタムフォントを待機しているテキストを WebKit が @font-face で処理する仕組みにあります。つまり、テキストは見えません。そのため、帯域幅の狭いモバイル接続では、約 5 万件のフォントデータが読み込まれるまでテキストはまったく表示されません。Webkit のチームは、数秒後に代替フォントを有効にするソリューションを追求していますが、それが実現されるまでは、ユーザーとコンテンツの間にこのような障害をユーザーが課すのは公平とは言えません。

ウェブフォントサービス

多くのサービスでは、@font-face 機能が簡単な API でラップされています。多くの場合、HTML に CSS やスクリプトを 1 行追加して設定するだけで、すべて完了できます。WebInk、Typekit、Fontslive などの多くでは、月額料金を支払ってフォントを使用できます（帯域幅の上限に達することもあります）。これらのサービスを使用することは、カジュアルなデベロッパーにとって非常に便利であり、クロスブラウザソリューションを提供する際の複雑さを引き受けます。

Google Font API では、スタイルシートにリンクするだけで、無料ライセンスが付与された少数のフォントセットを使用できます。ブラウザ間やパフォーマンスの問題は Google に任せることができます。ウェブフォントを使い始めるのが最も速い方法です。

@font-face に適したプロフェッショナルな書体を見つける

デザイナーにとってよくある驚きは、フォントライセンスを（たとえばグラフィックデザインに使用するために）購入したからといって、@font-face で使用できるわけではないことです。通常、@font-face（またはウェブ埋め込み）のライセンスは別売りです。契約書をよくお読みになり、ご不明な点がございましたら、フォントファウンドリーまでお問い合わせください。Fontspring はフォントブティックで、何百もの高品質なプロフェッショナルフォントを販売しており、そのすべては @font-face での使用が認可されています。FontFont などの創業者は @font-face ライセンスの直接販売を開始しましたが、現在は WOFF と EOT のみを対象としているため、ブラウザ市場のかなり（ただし縮小）部分を除外しています。多くの創業者はカタログにウェブフォントライセンスを追加していますが、選択した書体に適した書体が見つからない場合は、プロバイダにお問い合わせください。

FOUT への対処

「Flash of Unstyled Text」は、Firefox と Opera で見られる現象です。@font-face を介してカスタム書体を適用すると、ページの読み込み時に、フォントのダウンロードと適用がまだ行われておらず、font-family スタックの次のフォントが使用されます。この場合、アップグレード前に別のフォント（通常は見栄えが良くありません）でフラッシュされます。

ALT_TEXT_HERE — HTML5 スライド資料に「スタイルなしテキストの Flash」が導入されます。

Google Font API には WebFont Loader が付属しています。これは JavaScript ライブラリで、読み込みを細かく制御できる多数のイベントフックを提供することを目的としています。@font-face フォントの読み込み中に代替テキストを非表示にするという WebKit の動作を、他のブラウザで模倣する方法を見てみましょう。

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

JavaScript が無効になっている場合、テキストは常に表示され、なんらかの形でフォントエラーが発生した場合は、基本的な Serif に安全にフォールバックします。現時点では、これは暫定的な手段と考えてください。ほとんどのウェブフォントのエキスパートは、代替テキストを 2 ～ 5 秒間非表示にしてから、それを表示することを望んでいます。帯域幅が狭い場合やモバイルデバイスの場合、このタイムアウトによって大きなメリットがあります。当然のことながら、Mozilla は近日中にこれを修正する予定です。

font-size-adjust プロパティを使用すると、軽量ですが効果は低くなります。現在、これは Firefox でのみサポートされています。これにより、フォントスタック全体で x-height を正規化し、FOUT の目に見える変化の量を減らすことができます。実際、Font Squirrel 生成ツールには、アップロードしたフォントの高さの比率を表示する機能が追加されているため、font-size-adjust 値を正確に設定できます。

まとめ

ウェブフォントはデザイナーにかなりの自由をもたらし、裁量的な合字やスタイルの代替機能などの新機能により、柔軟性は大幅に高まります。CSS3 のこの部分は導入済みのブラウザの 98% をカバーしているため、現時点では自信を持って実装できます。ぜひご利用ください。