i am using node-canvas to generate a image for my discord server and i used some custom fonts and put them in my directory and they worked fine but when i deployed them on heroku or techstar host, the fonts don't load: heres how i am registering the fonts:
registerFont(path.join(__dirname, './../../../BlockHead_bold.ttf'), { family: 'BlockHead' }); registerFont(path.join(__dirname, './../../../Franchise-Free-Bold.ttf'), { family: 'Franchise Free' }); registerFont(path.join(__dirname, './../../../MANGOLD.ttf'), { family: 'MANGOLD' });
I have tried switching node-canvas version to 2.10.2 or 2.9.2 since i dont need to install font on my system with them but yea they didn't work either i also tried using absolute path as you can see above, they didn't work either.
the only thing i haven't tried which i got after searching in depth is that i would need to use cairo buildpack ? but my node-canvas installed perfectly on heroku so i didn't thought i would need that. but i try to install cairo buildpack but there aren't any for heroku-stack 22.
anyways i hope its not the 3rd option thats the problem because i don't plan on using heroku now.
The path was probably wrong on heroku. So I Used relative paths and resolved the actual absolute path with that, like this :
const path = require('path');
const blockHeadFontPath = path.resolve(__dirname, './../../../BlockHead_bold.ttf');
const franchiseFreeFontPath = path.resolve(__dirname, './../../../Franchise-Free-Bold.ttf');
const mangoldFontPath = path.resolve(__dirname, './../../../MANGOLD.ttf');
registerFont(blockHeadFontPath, { family: 'BlockHead' });
registerFont(franchiseFreeFontPath, { family: 'Franchise Free' });
registerFont(mangoldFontPath, { family: 'MANGOLD' });