Re: [css-font-loading] how/when do FontFace objects end up in a FontFaceSet

Tab Atkins wrote:

>>> Construction doesn't mention anything about automatically adding
>>> it to the document's font source, so it doesn't do so.
>>
>> I think the spec should state that explicitly.
>
> Done.

Ok, found it. I think I would word it slightly differently and
emphasize the implication of what this means for authors.

Current text: 

> Note: Note that constructing a FontFace object does not
> automatically add it to the document’s font source. If it’s desired
> that the newly-constructed FontFace object is usable from CSS/etc,
> it must be explicitly added to a font source. 

Emphasizing what this means for authors:

Newly constructed FontFace objects are not automatically added to the
FontFaceSet associated with a document or a context for a worker
thread. This means that while newly constructed fonts can be
preloaded, they cannot actually be used until they are explicitly
added to a FontFaceSet.  See the following section for a more complete
description of FontFaceSet.

Aside: as much as possible I would avoid the term "font source" as it
adds an extra level of indirection when reading the spec.

I think it would also be a good idea to have an example demonstrating
the different usage patterns that this suggests.

Example for the end of section 3.6:

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: newtest; src: url(newtest.woff); }", 0);
  document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";

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

  var newfont = new FontFace("newtest", "url(newtest.woff)", {});
  document.fonts.add(newfont);
  document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";
  
In both cases, the loading of the font resource 'newtest.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 newfont = new FontFace("newtest", "url(newtest.woff)", {});

  /* new FontFace not added to FontFaceSet so serif will be used */
  document.getElementsByTagName("body")[0].style.fontFamily = "newtest, 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 newfont = new FontFace("newtest", "url(newtest.woff)", {});
  newfont.load().then(function () {
    document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";
  }, handleError);

In this case, the font resource 'newtest.woff' is first downloaded.
Once the download completes, the body font is changed and the layout
engine uses the new font resource.

Cheers,

John Daggett

Received on Monday, 10 March 2014 02:06:05 UTC