Event handler	Event handler event type
{{onloading}}	{{loading}}
{{onloadingdone}}	{{loadingdone}}
{{onloadingerror}}	{{loadingerror}}

Fonts are available when they are added to a {{FontFaceSet}}. Adding a new ''@font-face'' rule to a stylesheet also adds a new {{FontFace}} to the {{FontFaceSet}} of the {{Document}} object. Adding a new ''@font-face'' rule:

		document.styleSheets[0].insertRule(
			"@font-face { font-family: newfont; src: url(newfont.woff); }", 0);
		document.body.style.fontFamily = "newfont, serif";

Constructing a new {{FontFace}} object and adding it to document.fonts:

		var f = new FontFace("newfont", "url(newfont.woff)");
		document.fonts.add(f);
		document.body.style.fontFamily = "newfont, serif";

In both cases, the loading of the font resource “newfont.woff” will be initiated by the layout engine, just as other ''@font-face'' rule fonts are loaded. Omitting the addition to document.fonts means the font would never be loaded and text would be displayed in the default serif font:

		var f = new FontFace("newfont", "url(newtest.woff)", {});

		/* new {{FontFace}} not added to {{FontFaceSet}},
		   so the 'font-family' property can't see it,
		   and serif will be used instead */
		document.body.style.fontFamily = "newfont, serif";

To explicitly preload a font before using it, authors can defer the addition of a new {{FontFace}} to a {{FontFaceSet}} until the load has completed:

		var f = new FontFace("newfont", "url(newfont.woff)", {});
		f.load().then(function (loadedFace) {
			document.fonts.add(loadedFace);
			document.body.style.fontFamily = "newfont, serif";
		});

In this case, the font resource “newfont.woff” is first downloaded. Once the download completes, the font is added to the document's {{FontFaceSet}}, the body font is changed, and the layout engine uses the new font resource.

The FontFaceSource interface

Worker FontFaceSources

Interaction with CSS’s ''@font-face'' Rule

API Examples

To show content only after all font loads complete:

			document.fonts.ready().then(function() {
				var content = document.getElementById("content");
				content.style.visibility = "visible";
			});

Drawing text in a canvas with a downloadable font, explicitly initiating the font download and drawing upon completion:

			function drawStuff() {
				var ctx = document.getElementById("c").getContext("2d");

				ctx.fillStyle = "red";
				ctx.font = "50px MyDownloadableFont";
				ctx.fillText("Hello!", 100, 100);
			}

			document.fonts.load("50px MyDownloadableFont")
			              .then(drawStuff, handleError);

A rich text editing application may need to measure text elements after editing operations have taken place. Since style changes may or may not require additional fonts to be downloaded, or the fonts may already have been downloaded, the measurement procedures need to occur after those font loads complete:

			function measureTextElements() {
				// contents can now be measured using the metrics of
				// the downloadable font(s)
			}

			function doEditing() {
				// content/layout operations that may cause additional font loads
				document.fonts.ready().then(measureTextElements);
			}

The {{loadingdone}} event only fires after all font related loads have completed and text has been laid out without causing additional font loads:

			<style>
			@font-face {
				font-family: latin-serif;
				src: url(latinserif.woff) format("woff"); /* contains no kanji/kana */
			}
			@font-face {
				font-family: jpn-mincho;
				src: url(mincho.woff) format("woff");
			}
			@font-face {
				font-family: unused;
				src: url(unused.woff);
			}

			body { font-family: latin-serif, jpn-mincho; }
			</style>
			<p>納豆はいかがでしょうか

In this situation, the user agent first downloads “latinserif.woff” and then tries to use this to draw the Japanese text. But because no Japanese glyphs are present in that font, fallback occurs and the font “mincho.woff” is downloaded. Only after the second font is downloaded and the Japanese text laid out does the {{loadingdone}} event fire. The "unused" font isn't loaded, but no text is using it, so the UA isn't even trying to load it. It doesn't interfere with the {{loadingdone}} event.

CSS Font Loading Module Level 3

Introduction

Values

Task Sources

The `FontFace` Interface

The Constructor

The `load()` method

Interaction with CSS’s ''@font-face'' Rule

The `FontFaceSet` Interface

Events

The `load()` method

The `check()` method

The `ready` attribute

Interaction with CSS Font Loading and Matching

The `FontFaceSource` interface

Worker FontFaceSources

Interaction with CSS’s ''@font-face'' Rule

API Examples

Changes

Acknowledgments

CSS Font Loading Module Level 3

Introduction

Values

Task Sources

The FontFace Interface

The Constructor

The load() method

Interaction with CSS’s ''@font-face'' Rule

The FontFaceSet Interface

Events

The load() method

The check() method

The ready attribute

Interaction with CSS Font Loading and Matching

The FontFaceSource interface

Worker FontFaceSources

Interaction with CSS’s ''@font-face'' Rule

API Examples

Changes

Acknowledgments

The `FontFace` Interface

The `load()` method

The `FontFaceSet` Interface

The `load()` method

The `check()` method

The `ready` attribute

The `FontFaceSource` interface