This is a right behavior that spec defines.

To use WebFonts only for canvas, you need to load fonts explicitly.

Example a: with CSS
-------------------
document.fonts.load("32px 'Amatic SC'");
document.fonts.ready.then(() => {
  // you can use it after the ready Promise is resolved.
});

Example b: with FontFace
------------------------
let font = new FontFace('MyFont', 'url(https://....)');
document.fonts.add(font);
Promise.all([font.load(), document.fonts.ready]).then(() => {
  // you can use it after the font loading is finished, and document is ready to use it.
});

I would like to present a counter argument to what you said.

I understand that those two cases you pointed out should work. And they do.

But if the spec says this must be done to use WebFonts on canvas, then my second drawing that is happening with the correct font is clearly in violation of it. Since I'm clearly not doing either and I'm getting the right font on the second draw.

I think what's happening here is that the font IS available to canvas by being on the CSS, but it's being lazily loaded asynchronously, which is strange. It's ok for font loading to be async or lazy. But not both, which would cause this "works the 2nd time" behaviour.

I've changed the status back, just so it pops up again, but please let me know what I'm missing here.

The first use just kicks a lazy loading.
You are seeing the font loading done by chance in the second use, but it isn't ensured.
To ensure that, you need to wait until the Promise is resolved as I introduced at #3.

Exactly, the first use kicks an async lazy loading. What I'm asking is: couldn't we make the the lazy load to not be async?

I'm not sure I understand your question correctly, but we haven't added any kind of blocking API to JavaScript for recent years, and all new API that takes time should be designed as an async one.

You said
> the font IS available to canvas by being on the CSS, but it's being lazily loaded asynchronously

But could you elaborate on what "IS available" means here? Actually, it isn't available until the font is added to the document.fonts and loading is finished. If you declear WebFonts in CSS, you don't need adding it to document.fonts because it's automatically added.


Here are links for relevant specs.

HTML Canvas 2D Context
https://www.w3.org/TR/2dcontext/#text-styles

> Font names must be interpreted in the context of the font style source node's stylesheets when the font is to be used; any fonts embedded using @font-face that are visible to that element must therefore be available once they are loaded. (If a reference font is used before it is fully loaded, or if the font style source node does not have that font in scope at the time the font is to be used, then it must be treated as if it was an unknown font, falling back to another as described by the relevant CSS specifications.) [CSSFONTS]

In the spec, it isn't defined how you can make the font in "fully loaded" state.

CSS Font Loading Module
https://drafts.csswg.org/css-font-loading/#font-load-event-examples

EXAMPLE 3 is for Canvas use case.
Here, it uses load()'s promise, but it's same with document.fonts.ready. The ready waits all added fonts, but load() just waits relevant font loading.