1

This is my CSS:

@font-face {
    font-family: 'avant-garde-gothic-lt-extra-light-v3';
    src: url('itc-avant-garde-gothic-lt-extra-light.eot'); /* IE9 Compat Modes */
    src: url('itc-avant-garde-gothic-lt-extra-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('itc-avant-garde-gothic-lt-extra-light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('itc-avant-garde-gothic-lt-extra-light.woff') format('woff'), /* Modern Browsers */
         url('itc-avant-garde-gothic-lt-extra-light.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

.region-content p {
    font-family: "avant-garde-gothic-lt-extra-light-v3";
    font-style: normal;
    font-weight: bold;
}

I'm using this formatting from this answer here Internet Explorer 11 and supported web fonts.

It works on Chrome, Firefox and Edge, but not IE11. IE11 loads CSS showing the font name, etc. but won't render the font's design. There are no errors on console.

If it's relevant, I'm trying to make this work on Drupal 7 Bootstrap sub-theme by importing fonts via @font-your-face module.

update: initially I had only .ttf font, I tried converting it to the rest of formats with font2web.com and fontsquirrel.com if it helps.

user3108268
  • 1,043
  • 3
  • 18
  • 37

1 Answers1

0

Be aware of one thing:
Fonts won't work in IE if the font-family entry in css is named differently than the font name! This bug took me all day to figure out and can be very frustrating if you are not aware of it.

try removing -v3 at the end of font-family:

@font-face {
    font-family: 'avant-garde-gothic-lt-extra-light';
    src: url('itc-avant-garde-gothic-lt-extra-light.eot'); /* IE9 Compat Modes */
    src: url('itc-avant-garde-gothic-lt-extra-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('itc-avant-garde-gothic-lt-extra-light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('itc-avant-garde-gothic-lt-extra-light.woff') format('woff'), /* Modern Browsers */
         url('itc-avant-garde-gothic-lt-extra-light.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

If this doesn't work, find out the proper full name of font and use it in font-family, clear your cache, close your browser, reopen and test.

beliha
  • 320
  • 3
  • 6