Using custom fonts with fabric in NodeJS

[ilyes24]

I'm using fabricJS with Angular & NodeJS, loading a custom font in angular is really smooth and easy i just followed the docs in the official website, using the FontFaceObserver made it very simple also.

But now i have a part where i need to load the saved project and generate a BASE64 PNG of it in NodeJS (and it may have some custom fonts).

So is it possible to load those fonts in NodeJS before exporting to PNG without facing the problem of FOUT

[syarkhan]

You need to use canvas.registerFont to load all the fonts first and then init your canvas on nodejs and generate base64 image.

But registerFont uses file path directory to load the fonts, if your fonts are google fonts or ttf/otf files saved somewhere, you need to download all the files first and save it locally and then use registerFont, after that when you have generated base64 image delete all those fonts saved locally by calling fs.unlinkSync(filePath);

1. loop through fonts in json
2. download fonts and save it locally
3. call fabric.nodeCanvas.registerFont(file.path, {family: fontName, weight: fontWeight, style: fontStyle})
4. init static canvas
5. load json to static canvas
6. call toDataURL
7. delete fonts saved locally