1

I am adding simple text element in fabric js using this code,

var t = new fabric.IText("Hello world !", {
    backgroundColor: '#FFFFFF',
    fill: '#000000',
    fontSize: 25,
    top : 50,
    left:50
});
canvas.add(t);

And its working perfect, Now issue when i am adding font in style like this,

<style type="text/css">
    @import url(//fonts.googleapis.com/css?family=Playfair+Display);
</style>

Then adding textbox into canvas using fabricjs like this,

var t = new fabric.IText("Hello world !", {
    backgroundColor: '#FFFFFF',
    fill: '#000000',
    fontFamily:'Playfair Display',
    fontSize: 25,
    top : 50,
    left:50
});
canvas.add(t);

With font applied, But when i click on texbox within canvas, you can see textbox has issue like this http://awesomescreenshot.com/0f05taz2f3. but this happens only when you load page first time or force reload page with ctrl+f5. Here is the fiddle second time it loads perfect.

Himanshu Bhardiya
  • 1,047
  • 14
  • 37

2 Answers2

0

The font hasn't been fully loaded by the time you add the text. Which means fabric is determining the width of the element based on the default font instead of your webfont.

You could wait until the font has loaded before adding to the canvas. This question has some answers on how to do this properly.

Community
  • 1
  • 1
Kable
  • 1,035
  • 8
  • 18
0

This is a known issue on Fabric's GitHub repo and it is assumedly being worked on.

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61