Text Display Issue in Textbox Object with Fabric.js v6.3.0

[niketaOptimumnbrew]

Hello,

I'm facing an issue with the Textbox object in Fabric.js (version 6.3.0) where the text does not display correctly, even when the width is set to be greater than the text itself. Below is a simplified version of my implementation:

import "./styles.css";
import * as fabric from "fabric";
import WebFont from "webfontloader";

var canvas = (window._canvas = new fabric.Canvas("c"));
var txt = new fabric.Textbox("This is a text string", {
fontFamily: "Montserrat",
fontSize: 28,
width: 200, // Setting width greater than text
});
canvas.add(txt);
canvas.renderAll();
let json = canvas.toJSON();

WebFont.load({
google: {
files: "https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",
families: ["Montserrat"],
},
active: function () {
canvas.loadFromJSON(json).then((res) => {
canvas.renderAll();
canvas.forEachObject(function (obj) {
obj.set({
width: 200, // Still setting a width greater than text
});
obj.setCoords();
canvas.renderAll();
});
});
},
});

Problem:
Despite setting the width of the Textbox greater than the text length, the text does not display correctly. It appears misaligned or cut off

Steps to Reproduce:
Create a fabric.Canvas instance.
Add a Textbox object with specific text, font, and a width set larger than the text.
Load a Google Font using WebFont.
Attempt to render and observe the text alignment.

Expected Behavior:
The Textbox should display the entire text properly within the specified width.

Actual Behavior:
The text does not align correctly and appears cut off, despite having sufficient width.

Additional Information:
Fabric.js version: 6.3.0

Browsers tested:
Chrome

Attached screenshots show the issue:

Demo
https://codesandbox.io/p/sandbox/exciting-worker-4kgrpw

Note:
This issue also generated in fabric latest version 6.4.2 , Check above url.

I would appreciate any guidance on how to resolve this issue or if there are any known limitations with the Textbox object.

Thank you!

[raulfelix]

hi @asturur
I am experiencing a very similar issue with cursor position not being correct for custom fonts. Have followed the guide and am sure all custom fonts have been loaded prior to rendering the canvas objects. Same issue as shown above.
Have attempted calling textObject.setCoords(); to refresh object coordinates but not too sure what else to try.

Thank you

[raulfelix]

For clarification I have figured out my issue. For me the cause was having 2 canvases on the page. I had one as a preview of what had been drawn and another as the active area you can draw. The preview was messing up the rendering of the font for some reason and once I applied the change to wait for fonts to load on both canvas the issue resolved itself.