Font loading | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`FontFace`	35	79	41	10	35	10
`fonts` fonts は Document インターフェイスのプロパティで、文書の FontFaceSet インターフェイスを返します。	35	79	41	10	35	10
`display` display は FontFace インターフェイスのプロパティで、フォントフェイスがどのように表示されるかを、それがダウンロードされ使用する準備ができているかどうかに基づいて決定します。このプロパティは CSS の font-display 記述子に相当します。	60	79	58	11.1	60	11.3
`family` FontFace.family プロパティにより、 FontFace オブジェクトのフォントファミリを取得したり設定したりすることができます。	35	79	41	10	35	10
`featureSettings` featureSettings は FontFace インターフェイスのプロパティで、フォントのバリアントプロパティでは利用できない、使用する頻度の低いフォント機能を取得または設定します。	140	140	41	10	140	10
`FontFace` FontFace() コンストラクターは、新しい FontFace オブジェクトを構築します。	35	79	41	10	35	10
`load` load() は FontFace インターフェイスのメソッドで、 source が URL で指定されたフォントをリクエストして読み込みます。このメソッドは、現在の FontFace オブジェクトで解決される Promise を返します。	35	79	41	10	35	10
`loaded` loaded は FontFace インターフェイスの読み取り専用プロパティで、 Promise を返します。これはオブジェクトのコンストラクターで指定されたフォントの読み込みが完了した時に、現在の FontFace オブジェクトで解決するか、 SyntaxError で拒否されます。	37	79	41	10	37	10
`status` status は FontFace インターフェイスの読み取り専用プロパティで、フォントの状態を示す列挙値 "unloaded"、"loading"、"loaded"、"error" のいずれかを返します。	35	79	41	10	35	10
`stretch` stretch は FontFace インターフェイスのプロパティで、フォントの伸縮方法を取得または設定します。	35	79	41	10	35	10
`style` style は FontFace インターフェイスのプロパティで、フォントのスタイルを取得または設定します。	35	79	41	10	35	10
`unicodeRange` unicodeRange は FontFace インターフェイスのプロパティで、フォントを包含する Unicode コードポイントの範囲を取得または設定します。	35	79	41	10	35	10
`variant` 非標準 variant は FontFace インターフェイスのプロパティで、プログラムでフォントのバリアント値を取得または設定します。	35	79	41	10	35	10
`variationSettings` variationSettings は FontFace インターフェイスのプロパティで、低水準の OpenType または TrueType フォントのバリエーションを取得または設定します。	140	140	62		140
`weight` weight は FontFace インターフェイスのプロパティで、フォントの太さを取得または設定します。	35	79	41	10	35	10
`worker_support` 労働者で利用可能	69	79	105	15	69	15
`FontFaceSet` FontFaceSet は CSS フォント読み込み API のインターフェイスで、フォントフェイスのダウンロードとダウンロード状況の問い合わせを管理します。	35	79	41	10	35	10
`@@iterator` [シンボル.イテレータ］	48	79	41	10	48	10
`add` add() は FontFaceSet インターフェイスのメソッドで、集合に新しいフォントを追加します。	35	79	41	10	35	10
`check` check() は FontFaceSet のメソッドで、まだ完全に読み込まれていない FontFaceSet 内のフォントを使用しようとせずに、指定されたフォント指定を使ってテキストをレンダリングすることができれば true を返します。すなわち、フォントスワップを発生させることなく、フォント指定を使用することができます。	120	120	41	10	120	10
`clear` clear() は FontFaceSet インターフェイスのメソッドで、このインターフェイスを介して追加されたすべてのフォントを除去します。 @font-face ルールで追加されたフォントは除去されません。	35	79	41	10	35	10
`delete` delete() は FontFaceSet インターフェイスのメソッドで、集合からフォントを除去します。	35	79	41	10	35	10
`entries` entries() は FontFaceSet インターフェイスのメソッドで、 FontFaceSet のそれぞれの要素に対して [value,value] の配列を含む新しい Iterator オブジェクトを返します。	48	79	41	10	48	10
`forEach` forEach() は FontFaceSet インターフェイスのプロパティで、 FontFaceSet オブジェクトの各値に対して指定された関数を実行します。	35	79	41	10	35	10
`has` has() は FontFaceSet インターフェイスのメソッドで、指定された値を持つ要素が存在するかどうかを検査して Boolean を返します。	35	79	41	10	35	10
`keys` keys() は FontFaceSet インターフェイスのメソッドで、 FontFaceSet.values の別名です。	48	79	41	10	48	10
`load` load() は FontFaceSet のメソッドで、引数で指定されたフォントをすべて読み込ませます。	35	79	41	10	35	10
`loading_event` loading イベントは、文書がフォントの読み込みを始めるときに発行されます。	35	79	41	26.2	35	26.2
`loadingdone_event` loadingdone イベントは、文書がすべてのフォントを読み込んだときに発行されます。	35	79	41	10	35	10
`loadingerror_event` loadingerror イベントは、フォントの読み込みが完了したが、一部またはすべてのフォントの読み込みに失敗した場合に発生します。	35	79	41	10	35	10
`ready` ready は FontFaceSet インターフェイスの読み取り専用プロパティで、指定された FontFaceSet を解決する Promise を返します。	35	79	41	10	35	10
`size` size は FontFaceSet インターフェイスのプロパティで、 FontFaceSet に含まれるアイテムの数を返します。	35	79	41	10	35	10
`status` status は FontFaceSet インターフェイスの読み取り専用プロパティで、集合内にあるフォントの読み込み状態を返します。	35	79	41	10	35	10
`values` values() は FontFaceSet インターフェイスのメソッドで、 FontFaceSet オブジェクトの各要素の値を挿入順に返す新しいイテレーターオブジェクトを返します。	48	79	41	10	48	10
`worker_support` 労働者で利用可能	69	79	105	15	69	15
`FontFaceSetLoadEvent` FontFaceSetLoadEvent は CSS フォント読み込み API のインターフェイスで、フォントフェイスの読み込みを始めてから FontFaceSet で発生するイベントを表します。	35	79	41		35
`fontfaces` fontfaces は FontFaceSetLoadEvent インターフェイスの読み取り専用プロパティで、 FontFace インスタンスの配列を返します。	35	79	41		35
`FontFaceSetLoadEvent` FontFaceSetLoadEvent() コンストラクターは、 FontFaceSetLoadEvent オブジェクトを返します。これは FontFaceSet の読み込みのたびに発生します。	57	79	41		57
`worker_support` 労働者で利用可能			105
`fonts` fonts は WorkerGlobalScope インターフェイスのプロパティで、このワーカーの FontFaceSet インターフェイスを返します。	69	79	105	15	69	15

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

実務での使いどころ

Font loading の活用

fonts は Document インターフェイスのプロパティで、文書の FontFaceSet インターフェイスを返します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

実務での使いどころ

Font loading の活用

注意点

実装メモ

参考リンク