Webfonts loading after calling .show() may result in wrong positioning

[fspoettel]

(Not a bug but something that people will run into and that could be documented in the README. I am happy to provide a PR and examples.)

When loading web fonts, setting font-display: swap is a good idea to avoid text being illegible until fonts are loaded. Google Fonts has made it a default recently for that reason. When set, the fallback font will be displayed until fonts are loaded, so font-family: 'Fancy Web Font', sans-serif; would show sans-serif until Fancy Web Font has been downloaded.
This can take some time and the document's load event might fire in-between.

It is common practice to put JS initialization logic into a document.ready callback or similar. When triggering rough-notation on document.ready, it might take into account the dimensions of the fallback font which usually are a bit off from the dimensions of the web font and that results in the notation having wrong dimensions.

There is a simple workaround: Waiting for the web font to load/cancel and call annotate right after that. This can be achieved via the CSS Font Loading API. This simple snippet did the trick for me:

document.fonts.ready.then(function () {
  // call `annotate()` here
})

Thank you for creating this library, it's awesome 🙂

[pshihn]

Thanks for the detailed tip.
It's unfortunate that resize handlers do not deal with font-swapping