(Solved) Embedded font displaying as Times New Roman in html

I recently ran into a problem where, the first time I tried to use a given font I had included in my project, it would display as Times New Roman. In these cases, the font would stay this way until something caused the affected TextField to re-render (eg, highlighting the text with my mouse).

Using Chrome’s dev tools, I noted that the font wasn’t actually listed as an available resource until the first time it was used. What appears to be happening is that the font is initially rendered during the time between when the GET request is made and the font actually becomes available; the font does not appear to get automatically re-rendered once the font becomes available.

To work around this, I added a div tag to my index.html file to ensure that the font is used (and thus loaded into the browser’s cache) before my game script runs. Eg:

div{
font-family: ‘MyFont’;
}

I had two use cases in which the bug was appearing, and both are fixed with the addition of this code.

Environment: haxe 3.2.0, openfl 3.3.3/lime 2.6.2
Browsers tested: Windows 7: Firefox 40.0.3, Chrome 45.0.2454.85; Android 5.1.1: Chrome 45.0.2454.84

1 Like