I am registering a font family with normal weight, and then setting fontWeight in fabricjs object with bold. I don't see any difference with bold or normal fontWeight.
Here is the code to generate image for text objects using fabricjs.
var fs = require("fs"),
fabric = require("fabric").fabric,
imageDataURI = require("image-data-uri"),
fetch = require("node-fetch");
(async () => {
const res = await fetch(
"https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf",
);
const fileStream = fs.createWriteStream("./font.ttf");
await new Promise((resolve, reject) => {
res.body.pipe(fileStream);
res.body.on("error", reject);
fileStream.on("finish", resolve);
});
main();
})();
const main = () => {
fabric.nodeCanvas.registerFont(__dirname + "/font.ttf", {
family: "Press Start 2P Regular",
weight: "normal",
});
const textWithBoldFontWeight = {
objects: [
{
type: "textbox",
version: "5.3.0",
originX: "left",
originY: "top",
left: 323.81,
top: 208.9,
width: 323.89,
height: 79.09999999999998,
fill: "rgba(255, 255, 255, 1)",
stroke: "#000",
strokeWidth: 0,
strokeDashArray: [],
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: true,
strokeMiterLimit: 4,
scaleX: 0.39,
scaleY: 0.39,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
visible: true,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "stroke",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
fontFamily: "Press Start 2P Regular",
fontWeight: "bold",
fontSize: 70,
text: "Headline",
underline: false,
overline: false,
linethrough: false,
textAlign: "center",
fontStyle: "normal",
lineHeight: 1.16,
textBackgroundColor: "",
charSpacing: 0,
styles: [],
direction: "ltr",
path: null,
pathStartOffset: 0,
pathSide: "left",
pathAlign: "baseline",
minWidth: 20,
splitByGrapheme: false,
},
],
background: "rgba(0, 0, 0, 0)",
};
fabric?.Textbox?.fromObject(
textWithBoldFontWeight.objects[0],
async function (obj) {
try {
const image = obj.toDataURL({
format: "image/png",
withoutShadow: false,
});
await imageDataURI.outputFile(
image,
"./text-with-bold-font-weight.png",
);
} catch (error) {
reject(error);
}
},
);
const textWithNormalFontWeight = {
objects: [
{
type: "textbox",
version: "5.3.0",
originX: "left",
originY: "top",
left: 323.81,
top: 208.9,
width: 323.89,
height: 79.09999999999998,
fill: "rgba(255, 255, 255, 1)",
stroke: "#000",
strokeWidth: 0,
strokeDashArray: [],
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: true,
strokeMiterLimit: 4,
scaleX: 0.39,
scaleY: 0.39,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
visible: true,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "stroke",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
fontFamily: "Press Start 2P Regular",
fontWeight: "normal",
fontSize: 70,
text: "Headline",
underline: false,
overline: false,
linethrough: false,
textAlign: "center",
fontStyle: "normal",
lineHeight: 1.16,
textBackgroundColor: "",
charSpacing: 0,
styles: [],
direction: "ltr",
path: null,
pathStartOffset: 0,
pathSide: "left",
pathAlign: "baseline",
minWidth: 20,
splitByGrapheme: false,
},
],
background: "rgba(0, 0, 0, 0)",
};
fabric?.Textbox?.fromObject(
textWithNormalFontWeight.objects[0],
async function (obj) {
try {
const image = obj.toDataURL({
format: "image/png",
withoutShadow: false,
});
await imageDataURI.outputFile(
image,
"./text-with-normal-font-weight.png",
);
} catch (error) {
reject(error);
}
},
);
};
The 2 images generated are the same. For first image I provided fontWeight as bold and for second I provided fontWeight as normal.