3

Using paper.js, I'm creating one-character-long text objects the screen using the following call: 

var text = new paper.PointText({
  point: [x,y],
    content: "9",
    fillColor: "white",
    font: "Comfortaa",
    fontWeight: "bold",
    fontSize: 30
});

I'm however encountering the issue where the text is rasterized onto the screen with whatever default font is defined on the body and it stays that way until I move the PointText object with a tool's drag event. As soon as I move the piece of text with the mouse, the text immediately changes font to, in this case, Comfortaa. Here are two screenshots of before and after:

before drag, font is the default Open Sans after dragging the character to the left, fonts change

It doesn't look like calling paper's draw() after the first draw makes much of a difference here. Also, the fonts are not loaded asynchronously with something like Google Fonts API, they're local and thus that's not the problem.

Alexandr Kurilin
  • 7,685
  • 6
  • 48
  • 76

1 Answers1

5

Using Jürg Lehni's suggestion, I was able to make it work by adding a new div, setting the visibility to hidden, and the font family to my webfont.

<div style="visibility: hidden; font-family: 'Share Tech Mono';">test</div>

winduptoy
  • 5,366
  • 11
  • 49
  • 67