I am currently working with fabric js version 1.7.22 alongside angular 7 to create a text editor. I have encountered an issue when trying to add text to the canvas using a custom font as shown in the code snippet below.
var canvas= new fabric.Canvas('c');
var junction_font = new FontFace('3d.demo', 'url(https://fonts.gstatic.com/s/bethellen/v1/WwkbxPW2BE-3rb_JNT-qIIcoVQ.woff2)');
junction_font.load().then(function (loaded_face)
{
console.log('loaded.font', loaded_face);
document['fonts'].add(loaded_face);
var text = new fabric.IText("lazy dog jumps over crystle guy.", {
top: 10,
left: 10,
fontFamily: '3d.demo'
})
canvas.add(text);
canvas.renderAll();
});
This code works perfectly fine with the latest version of fabric js 3.2.2, but it displays small text when used with fabric js version 1.7.22.
Unfortunately, my entire project is based on the older version and I cannot update it at this time.
I have tried searching extensively on Google to find a solution for this issue, but so far I have been unsuccessful.
Is there any Patch available to resolve this problem and support all kinds of font names? Any help would be greatly appreciated.
For a demonstration of the issue, you can refer to this fiddle:https://jsfiddle.net/Mark_1998/pxr9yz7g/