'Textbox bounding box with custom font is loaded incorrectly

I tried loading a new font to my FabricJS canvas. But when after it rendered, the text is placed incorrectly in relation to its bounding box. However, the size and positioning of the bounding box itself seem to be good, the content (text) is misplaced. I tried a number of things, including waiting for the font to properly load before setting the attributes of the textbox, but it wasn't completely successful, so I am turning to SO for further suggestions.

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source