How to fix Font Face rendering in IE11 and Edge browser (solution)!

Microsoft Internet Explorer 11 and Edge browser do not render local font files FACE on text objects on start of layout, displaying fallback font like Time New Roman instead.

By local font files, I mean downloaded Google fonts, like: Exo, Krub, worksans in 3 formats (ttf,woff,woff2)

It is a known issue also occurring on standard HTML5 tags and CSS, not just in canvas.

(YES bad browsers)

Working & tested solution that I wish to share:

• Once all text treatments are done (if any): Ajax local translation file loaded and text updated
• Or On Start of Layout
• Create a Family with all text object from your game. Call a function that loop all objects and change the size property
• This will force re rendering of the text objects with the right font-face

This should not happen with imported Web Font files in the C3 runtime, since it pre-loads the fonts before starting the game ensuring they can render correctly on the first frame. The C3 runtime does not work in IE11, so I assume you're using the C2 runtime? This should not be an issue for modern projects.

Yes I'm using C2 runtime for retro compatibility with IE11 and Edge + WebGL1.

I agree that this should not happen (font-face not rendering properly), but it is sadly a 100% repro step for us for the last 3-4 years.

Construct is not the problem here, it is really a browser font loading VS synchronisation timing problem.

Thanks!

Yes I'm using C2 runtime for retro compatibility with IE11 and Edge + WebGL1.

FYI the C3 runtime works with WebGL 1 too, so that is not a reason to stick to the C2 runtime.