0

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Cameron Gray
  • 57
  • 1
  • 9
  • 1
    check this out first https://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8 –  Dec 27 '17 at 17:00
  • 1
    You need to call more font formats to support other browsers. Woff and woff2 to be exact. More here: https://graphicdesign.stackexchange.com/questions/63882/whats-the-smallest-set-of-web-font-formats-that-covers-all-browsers – Nathaniel Flick Dec 27 '17 at 17:09
  • Hmm so if I am trying to use a font that doesn't have an available WOFF/WOFF2 font format, it appears I am S.O.L.. How unfortunate. – Cameron Gray Dec 27 '17 at 17:36
  • you need just `?#iefix` for ie – Cenk YAGMUR Jan 02 '18 at 12:41

1 Answers1

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Cameron Gray
  • 57
  • 1
  • 9