@Font-Faceの扱い方

この記事は初心者から最も経験豊富なウェブ開発者まで、誰にでも適しています。10年以上の経験を持つシニアウェブ開発者がフォントを無視し、適切に扱っていないのを見てきましたので、ぜひお読みください。

以下の数行を読めば、すべてのブラウザで正しく動作する正しい@font-faceとCSSを使用できるようになります。

ウェブサイトはすべてのデバイスで期待通りの見た目と機能を発揮します。

Font Faceとは？

これは既にご存知だと思います。そうでなければこの記事を読んでいないでしょう。

しかし情報として、@font-faceはリモートユーザーがシステムにインストールしていなくても、特定のフォントをウェブサイトに埋め込むことを可能にします。

利用可能なフォントタイプは：".woff"、".woff2"、".ttf"、".otf"、".eot"、".svg"です。

• .woff はWeb Open Font Formatの略
• .woff2 はWOFF 2.0 - Web Open Font Formatの略
• .ttf、.otf はTTF/OTF - TrueTypeとOpenTypeの略
• .eot はEOT - Embedded OpenTypeの略
• .svg はSVGフォントの略

各ブラウザにはこれらのタイプに対する「独自の」サポートがあります（残念ながら）ので、それを考慮する必要があります。

すべてのデバイスとブラウザでページが同じように見えるようにするには、上記のすべてのフォーマットが必要です。

Font Faceの正しい使い方

ここがトリッキーな部分です。Googleで検索しても、トップサイトでさえ厳しい現実を示してくれません。

上記の通り、各ブラウザには独自のフォントサポートがあり、すべてのブラウザでフォントを動作させたい場合は、必要なフォントタイプをロードし、それに応じてCSSを調整する必要があります。

例えばMozilla を確認すると、次のようになっています：

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

これで十分でしょうか？いいえ、すべてのブラウザで動作しません。例えばInternet Explorerでは全く動作しません。

https://caniuse.com/?search=woff2 で確認できます。

別の例として、W3 Schools を確認すると：

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

これは正しいですか？まだダメです。すべてのブラウザをサポートしていません。

すべてのブラウザをサポートするには、ロードするフォントタイプとCSSは次のようにする必要があります：

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

各フォントタイプのコメントに注目してください。自明です。これですべてのブラウザをサポートし、フォントが正しく表示されます。

Font Faceタイプの変換と生成方法

クライアントのためにウェブサイトを開発する場合、通常は1つのフォントタイプを渡されます。.otfまたは.ttfフォーマットのみで、これだけでは不十分です。

すべてのブラウザに必要なすべてのフォーマットが必要なので、適切な@font-faceタイプに変換する必要があります。

幸いなことに、これを自動的に行い、正しいCSSも生成するオンラインツールがあります（進化したかどうか）。

有料/カスタムフォントの変換

Transfonter の使用をお勧めしますが、お好みのツールを使用できます。

このオンライン無料ツールはフォントを変換し、すぐに使えるフォントタイプとCSSを提供します：

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

無料/オープンソースフォントの変換

クライアントが有料フォントではなく無料のGoogle Fontを提供する場合、そのためのツールもあります：https://google-webfonts-helper.herokuapp.com/fonts 。

このツールもすべてのブラウザでフォントを正しく表示するために必要なタイプとCSSを生成します。

結果のフォントを異なるブラウザで確認することを強くお勧めします。

Font Familyの正しい使い方

フォントファミリーの仕様を最適に使用したことがないと確信しています。正しいfont faceをロードするだけでは不十分で、フォールバックフォントも指定する必要があります。

フォールバックフォントは、現在のフォントが利用できない場合に使用されます。CDNの問題やネットワークタイムアウトなど、いくつかの理由で発生する可能性があります。

ほとんどのCMSが次のようにフォールバックフォントを定義していることに気づくでしょう：

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

これで十分でしょうか？残念ながら、いいえ。システムフォントはすべてのデバイスで同じではありません。Windowsには独自のものがあり、Androidにも独自のものがあり、iOSにもあります。

では何をすべきか？適切に宣言しましょう。Bootstrap のやり方を見てみましょう：

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

カスタムフォントと組み合わせた結果は：

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

これはフォールバックフォントを扱うスマートな方法で、フォントの読み込み中（または全く読み込まれない場合）でも、すべてのデバイスでウェブサイトがスムーズに表示されることを保証します。

Font FaceとFont Familyのテスト

テストという言葉に怖がらないでください。スマートに作業すれば非常に簡単なプロセスです。どのフォントが読み込まれたかを確認するために手動でページを検査する必要すらありません（怠惰な場合）。

技術の進化とともに、開発者が利用できるツールも進化し、ものを作ることがますます簡単になっています。

@font-faceとfont-familyが正しくロードされているかの確認は非常に簡単なプロセスです。以下をご覧ください。

Font FaceとFont Familyの確認

1. ブラウザ拡張機能を使って、サイトが使用しているフォントを簡単に確認：

• Fontanello
• WhatFont
• CSS Peeper

2. ページを編集して@font-faceを「壊し」、カスタムフォントが読み込まれないケースをシミュレートします。フォント名やURLを存在しないフォントに変更することで読み込みを「壊す」ことができます。
3. 結果はデバイスに一致するフォールバックの最初のフォントになるはずです。例えばAppleデバイスでは"-apple-system"になるはずです。

ヒントとコツ

• CDNからフォントを読み込む場合は"preconnect" HTMLリンクヘッダータグを使用してください。
• すべてのフォント宣言にfont-display: swap;を追加して読み込みを高速化します。これはカスタムフォントが完全にダウンロードされるまでフォールバックフォントを使用してテキストを表示するようブラウザに指示します。
• 実際に必要なフォントのみを読み込んでください。同じフォントの7種類を読み込んで1つしか使わない人を見たことがあります。
• ページ速度を向上させるために、HTTP/2を使用して（最初のまたは必要な）フォントをプリロードしてください。これによりページが大幅に高速化され、Google PageSpeedの「Ensure text remains visible during webfont load」の問題が修正されます。

以上です。この記事がお役に立てば幸いです。