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

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

Paul Irish

はじめに

フォントプレビューツール — フォントのプレビューツールで、ウェブフォントがいかに柔軟であるかを確認する

CSS3 の @font-face 機能を使用すると、ウェブ上でカスタムタイポグラフィをアクセス可能で、操作可能、スケーラブルな方法で使用できます。「Cufon や sIFR があり、画像にテキストを使用しているのに、なぜ @font-face を使用するのか？」と思われるかもしれません。カスタムフォントで @font-face を使用するメリットは次のとおりです。

検索（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	Opera 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 生成ツール — Font Squirrel ジェネレータ

頭痛がまだ起きませんか？すぐに作業を開始したい場合は、Font Squirrel ジェネレータをご利用ください。このツールを使用すると、フォントからバリエーションと CSS を自動的に作成し、プロセス全体を簡素化できます。ウェブフォントを実装するうえで不可欠なものです。

モバイルサポート

モバイル 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 への対応

スタイル設定されていないテキストの点滅は、Firefox と Opera で発生する現象で、ウェブデザイナーの多くは好ましく思っていません。@font-face を使用してカスタム書体を適用すると、ページの読み込み時にフォントがまだダウンロードされて適用されていないため、font-family スタック内の次のフォントが使用されることがあります。これにより、アップグレードされる前に、別の（通常は見栄えの悪い）フォントが点滅します。

ALT_TEXT_HERE — HTML5 スライドデッキで書式設定されていないテキストが点滅する。

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 が無効になっている場合、テキストは常に表示されます。フォントエラーが発生した場合は、基本的なセリフフォントに安全にフォールバックします。これは当面の応急処置と考えてください。ほとんどのウェブフォントエキスパートは、代替テキストを 2 ～ 5 秒間非表示にして、その後表示することを望んでいます。低帯域幅のデバイスやモバイルデバイスでは、このタイムアウトが非常に役立ちます。Mozilla は、この問題を近日中に修正する予定です。

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

概要

ウェブフォントはデザイナーにかなりの自由度をもたらします。今後は、任意の合字やスタイルオルタネートなどの機能が追加され、さらに柔軟性が高まります。現時点では、この部分の CSS3 は、デプロイされているブラウザの 98% をカバーしているため、安心して実装できます。お楽しみください！