1633 sujets

Formats, encodage, internationalisation, XML

[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.
Modérateur
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é.
Modérateur
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.
Modérateur
Après quelques recherche il semblerait qu'il y a pas mal de soucis avec l'affichage des font-icon material sur IE11... et a mon avis c'est plus lié a Material qu'a la font. Sur une issues Github je viens de voir : 


/* Support for IE. */
  font-feature-settings: 'liga';

https://github.com/GwtMaterialDesign/gwt-material/issues/149#issuecomment-158004329
Mais je sais pas si c'est en rapport hahaha
Modifié par _laurent (26 Jul 2018 - 14:11)
Meilleure solution
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.
Modérateur
Victoire involontaire par ricochet et pur hasard hahaha
Mais je prends quand meme Smiley lol
Bonne aprem
Sujet clos
Aller à