To clarify how things work, Paper.js is heavily based on the web canvas API
, it uses it as its rendering engine.
The font family that you pass to your Paper.js text is then passed to those methods and as you can see from the documentation, they apply the same logic as CSS.
So if your font is loaded at drawing time, then it is used, otherwise, a fallback font is used (if none if provided, the browser default font will be used).
So the question is how to make sure that your font is loaded ?
- you can use the newly experimental CSS Font Loading API
, which allow you to load your font programmatically
- you can use your font on an element of the DOM using CSS, which will trigger the font loading
So I guess that if the fontfaceobserver library was not needed in your case, that means that the font is used elsewhere on the page before you draw the text to your canvas.