character width calculation wrong with some font which can make auto indent - fabricjs

Question

i create a normal textbox and type some "i"s inside,the font i use is Lobster1.3,as you can see,i just selection one character,but the result is not correctly
and this is the last character position while in selection.
it looks that some font like Lobster1.3 which can make auto indent can make some character width calculation wrong

Answer 1

You have to ensure the font is properly loaded on the canvas before creating a fabricObject that uses it, if not fabricjs creates a cache of characters width that you have to manually delete to get the good one.
var jsondata = {
"objects": [{
"type": "textbox",
"originX": "left",
"originY": "top",
"left": 50,
"top": 50,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.7870722433460076,
"scaleY": 1.7870722433460076,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"stretchMode": "any",
"lockScalingX": false,
"lockUniScaling": false,
"lockScalingY": true,
"text": "iiiiiiiii",
"fontSize": "42",
"fontWeight": "normal",
"fontFamily": "Lobster",
"fontStyle": "",
"textDecoration": "",
"textAlign": "left",
"letterSpacing": 20,
"lineHeight": 1.16,
"textBackgroundColor": "",
"charSpacing": 20,
"styles": {
"0": {
"0": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"1": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"2": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"3": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"4": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"5": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"6": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"7": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"8": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
}
}
},
"minWidth": 20,
"lastCachedStyleObject": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
}
}],
"backgroundData": "#ffffff",
"width": 1023,
"height": 637
}
var canvas = new fabric.Canvas("myCanvas");
canvas.controlsAboveOverlay = true;
canvas.backgroundColor = '#FFFFFF';
WebFont.load({
google: {
families: ['Lobster']
},
active: function() {
canvas.loadFromJSON(jsondata, canvas.renderAll.bind(canvas));
}
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<canvas id='myCanvas' width='800' height='600'></canvas>

Answer 2

Fabric has a method that clears the font cache to ensure you don't get the wrong measurements for your bounding box when loading in and applying fonts to textbox objects.
clearFabricFontCache(fontFamilyopt)
From their documentation
http://fabricjs.com/docs/fabric.util.html
Clear char widths cache for the given font family or all the cache if no fontFamily is specified. Use it if you know you are loading fonts in a lazy way and you are not waiting for custom fonts to load properly when adding text objects to the canvas. If a text object is added when its own font is not loaded yet, you will get wrong measurement and so wrong bounding boxes. After the font cache is cleared, either change the textObject text content or call initDimensions() to trigger a recalculation
So in this case you could write:
canvas.loadFromJSON(jsonData, () => {
//clear character cache to ensure bounding boxes for fonts are correct
fabric.util.clearFabricFontCache();
canvas.renderAll()
});