Font-Face not working in IE or Edge

Question

I am using the following font-face rule:

@font-face {
    font-family: aiCustomFont;
    src: url('../fonts/myriadpro-regular.otf') format('opentype'),
        url('../fonts/myriad pro regular.ttf') format('truetype');
}

This works exactly as expected for Safari, Chrome, and Firefox. It does not work at all for IE11 and Edge. I am not seeing any errors logging to the console or anywhere else. I have found many articles on font issues in IE but most of them are several years old.

Do I still need different font formats outside of TTF/OTF for the font to display in IE11/Edge?

Answer 1

If anyone stumbles across this post, I ended up just using a more web-friendly font.

Make sure your @font-face rules are NOT contained in media queries. @font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.