Internet Explorer 11 Unlearned Text Burst (FOUT) while serving webfont

Question

Internet Explorer 11 Unlearned Text Burst (FOUT) while serving webfont

I am now wondering if there is anything I can do about this. We host the site on a cloud server that doesn't seem to have the fastest connection. This website uses a web font that is rendered with the following CSS / HTML:

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular-webfont.ttf') format('truetype'),
         url('Montserrat-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Bold-webfont.woff') format('woff'),
         url('Montserrat-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
body {
    font-family: 'Montserrat', sans-serif;
}

And reference it like this:

<link href="/montserrat-webfont/stylesheet.css" 
      rel="stylesheet" 
      type="text/css" 
      media="all">

Pretty simple. Works great in every browser, even on a slow server, except for Internet Explorer 11. IE11 always flashes the fallback sans serif font before displaying the Montserrat web font.

When I host the same site locally I dont see the flash, I assume the page itself is loading much faster.

Is there anything I can do here? I made a font family declaration !important

, I did the <link>

very first one in mine <head>

, and I still haven't been able to get rid of this burst of uneven text on every single page load. Even when I go back to the page that needed to be cached. This happens on every page load.