Font Rendering on Canvas for PSD Previews

[aamirsdev]

Font Rendering on Canvas for PSD Previews
To generate visible text pixel data for PSD previews, I render on a canvas (skia-canvas currently) setting:

ctx.font = `${canvasFontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;

However, if the canvas cannot recognize or resolve the specified font family, it falls back to a default font, causing the PSD preview text to render incorrectly with the wrong font family.
What I tried:
Registering fonts explicitly with FontLibrary.use() by providing the path of .otf font files, e.g.,

FontLibrary.use('Amandine', ['fonts/fonnts.com-Amandine_Bold_Italic.otf']);

This approach requires having all .otf font files locally, which is not reliable or scalable in environments with many or unknown fonts.

[Agamnentzar]

Rendering is out of scope for this library, I think you can't really rely on being able to render text layer if you don't have access to all the same font files that the person that created the PSD document.

[aamirsdev]

Thanks for your response!
Let me provide a bit more detail about my use case. I’m creating editable text layers from data that I receive in JSON format. When the PSD file is opened for the first time, I generate the bitmap using the canvas to render the text value.
While setting the text on the canvas, I also set the font family in the canvas properties. However, if the canvas doesn’t recognize that font family, it renders the text using a default font instead.
To fix this, I tried manually registering a few .otf font files using FontLibrary.use(), for example:
FontLibrary.use('Amandine', ['fonts/fonnts.com-Amandine_Bold_Italic.otf']);
With this setup, the text renders correctly using the specified font family. But I noticed that the canvas only recognizes a limited set of fonts family, and to get accurate rendering, I need to register each font’s .otf file manually.
This approach isn’t very reliable, as users can specify any font family in their text layers, and we can’t preconfigure all of them in advance.
Could you please suggest if there’s any better or more scalable approach to handle this situation — so that the text still renders properly according to the specified font family without manually registering every .otf file?

[Agamnentzar]

You have to have some list of available fonts and register only the ones needed that you see in JSON file