[Résolu] Polices d’icônes en woff2 à rendre compatible

Bonjour,

j’utilise une police d’icônes au format woff2 :
https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

pour avoir cette série de boutons.

<button>fast_rewind</button><button>skip_previous</button><button>play_arrow</button><button>skip_next</button><button>fast_forward</button>

Pour rendre compatible cette police à IE, je l’ai converti en ttf, mais cela ne marche pas.

Que faut-il faire pour que ces icônes apparaissent sur IE, sans passer par des images ?

Merci.

Salut,

Perso je n'utilise que WOFF2 et WOFF en fallback.
Ou as-tu pris ce fichier ? Il n'y avait pas d'autres formats avec ?

Tu l'as converti en TTF mais tu as modifié le code d'import ?

Je vais essayer de le convertir en WOFF, niveau compatibilité cela me va très bien.

Pour le code d’import, je n’ai rien modifié.

adrien881 a écrit :
Je vais essayer de le convertir en WOFF,

Du coup je te repose une des question : Ou as-tu pris ce fichier ? Il n'y avait pas d'autres formats avec ?

adrien881 a écrit :
Pour le code d’import, je n’ai rien modifié.

Et bien du coup il faut lui dire que tu as un nouveau format, il ne va pas le deviner.
En gros on utilise @font-face pour importer une font. Pour le moment il n'importe que woff2 j'imagine, il faut rajouter le format de fallback que tu veux sinon il ne va pas l'importer. Ex :

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

J’ai donné l’adresse du fichier de la police woff2 dans mon premier message. Cela fait quelques mois que je l’avais enregistré et j’avais juste noté cette adresse :
https://fonts.googleapis.com/icon?family=Material+Icons

J’ai converti la police en woff.

Dans le @font-face, pour tester j’ai mis en commentaire la src vers le format woff2 et j’ai seulement indiqué la source vers le format woff :

@font-face {
  font-family: 'ControleVideo';
  font-style: normal;
  font-weight: 400;
  /*src: url(iconesControleVideo.woff2) format('woff2');*/
  src: url(iconesControleVideo.woff) format('woff');
}

.controles button {
  font-family: 'ControleVideo';
…
  

Résultat cela marche très bien sur Firefox, mais IE11 affiche des boutons vides.

Le rajout de la ligne font-feature-settings: 'liga'; corrige très bien le problème d’IE.
Je viens de réaliser que cette police utilisait des ligatures. Je comprends mieux maintenant qu’à partir d’un mot comme «skip_next», cela affiche un seul symbole.
En revanche :
font-variant-ligatures: common-ligatures; n’a pas l’air de marcher et il faut bien utiliser la propriété que tu m’as trouvé.

Merci beaucoup Laurent.

Victoire involontaire par ricochet et pur hasard hahaha
Mais je prends quand meme
Bonne aprem