Web fonts working great with Chrome/FF, but not on IE/Edge

[Nick0602]

Hi there,

first of all I wanted to introduce myself as it's the first time i create a thread on this forum even though I've been lurking for quite a while I'm a bachelor student in CS and as graduate thesis I'm working on a tetris clone (big shout out to @Jerorx as I used his example as starting point) made with Phaser that will be used to treat sight diseases caused by ambliopya. Nothing too particular, just a game that relies on Anaglyph 3D and plays with colors a bit

I took the original source code and I changed it to make the layout fit on phones (i'm using Cordova) with all the additional features I wanted. This is the first time I approach HTML/JS game development and I have to say that Phaser looks like an awesome framework, and as soon as I'm done with this I will surely try to keep going with many other ideas.

 

Getting to the point: the mobile version shipped with Crosswalk (I used Intel XDK) works perfectly, but I wanted to make it available via web as well and it works great on Chrome/Firefox. However, IE/Edge refuse to load the webfont I downloaded and included in the game project.

This is the @font-face I have in my CSS file:

@font-face {
    font-family: "Questrian";
    src: url("../fonts/questrian.eot");
    src: url('../fonts/questrian.eot?#iefix') format('embedded-opentype'),
         url('../fonts/questrian.woff2') format('woff2'),
         url('../fonts/questrian.woff') format('woff'), 
         url('../fonts/questrian.ttf') format('truetype'),
         url('../fonts/questrian.eot#Questrian') format('svg');
}

And in my JS file I have something like this:

var sidebarTextStyle = { 
        font: textSize+"em Questrian", 
        fill: "#FFFFFF"
    };

As the textSize changes depending on the screen size etc, then I create the labels with:

gameDetails.labels.timerLabelDesc = game.add.text(sidebarMiddle, verticalGap, "TIME", sidebarTextStyle);

To make the font load in Phaser I used the workaround described in some other thread here on this forum (sorry I lost the link) and I put a <p> tag like this before the game <div>:

<div class="fontPreload" style="font-family: Questrian;">.</div>

And in my CSS I have:

.fontPreload {
    left: -100px;
    position: absolute;
}

 

As I said everything works like a charm on Firefox/Chrome (even on mobile as I tried to run them via browser), however IE/Edge load the game scene with everything but the labels. Here's some screenshots (only the upper half to save some space):

FIREFOX:

EDGE/IE:

I tried to use the font outside of the game (I have some other HTML pages made with Bootstrap to manage preferences along with info about the project) and it renders fine, but it just seems that apparently Phaser and IE/Edge don't like each other.

Does anyone have any hint?

Thanks in advance for your help and your time.