Mes polices Web ne sont pas le rendu sur IE11

Question

Ceci est mon 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; 
} 

J'utilise cette mise en forme de cette réponse ici Internet Explorer 11 and supported web fonts.

Fonctionne sur Chrome, Firefox et Edge, mais pas IE11. IE11 charge CSS affichant le nom de la police, etc. mais ne rendra pas la conception de la police. Il n'y a pas d'erreurs sur la console. Si c'est pertinent, j'essaye de faire fonctionner ce sous-thème de Drupal 7 Bootstrap en important les polices via le module @ font-your-face. Au début, j'avais seulement la police .ttf, j'ai essayé de le convertir au reste des formats avec font2web.com et fontsquirrel.com si cela aide.

Answer 1

Faites attention à une chose:
Les polices ne fonctionneront pas dans IE si l'entrée de la famille de polices dans css est nommée différemment du nom de la police! Ce bug m'a pris toute la journée pour comprendre et peut être très frustrant si vous n'êtes pas au courant.

essayez de supprimer -v3 à la fin de la famille de la police:

@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 */ 
 
    }

Si cela ne fonctionne pas, trouver le nom propre complet de police et l'utiliser dans font- famille, vider votre cache, fermer votre navigateur, rouvrir et tester.