Bonjour à tous,

Je développe un site web et je teste donc les rendus sur chaque navigateurs.
Surprise de découvrir que Calibri n'est pas pris en compte par Safari (je me remet à la programmation, j'avais oublié ce détai...).
Après avoir installé calibri en TTF téléchargé sur le web pour le fixer, cela fonctionne niquel, mais le rendu n'est plus le même sur les autres navigateurs (Mozilla, GG Chrome, IE).

Auriez-vous des astuces afin de garder le rendu de Calibri normal, et avoir Calibri sur Safari en rendu propre? Il y a peut être moyen de contourner et forcer le fichier TTF que pour Safari ?

En vous remerciant par avance pour vos réponses.

3 réponses


popotte
Réponse acceptée

Hello :)

Il faut que tu télécharges toutes les formes de police d'écriture dans ton projet, et sue tu les charges toutes à la suite, le navigateur va tester le premier, puis le deuxieme etc jusqu'a ce qu'il trouve une extension qu'oil supporte

TTF, Woff, Woff2, Otf, SVG

Tentes de charger en premier Woff2 qui est plus léger, ensuite Woff, ensuite pour les navigateur pourris charges à la suite TTF et Otf si sont compatibles sur tous les navigateurs (en principe)

Si tu veux appliquer des effets spéciaux à tes polices utilises SVG

Faudra aussi charger tous les modes que tu veux, regular, light, bold, italic, etc... Que tu chargera dans différente polices ('calibri', 'calibri-regular', 'calibri-bold', ...)

Tu n'as pas besoin de "forcer" le navigateur, juste à chainer les chargement du plus moderne au plus ancien, Safari ne va pas réussir à charger les fichier woff du coup il passe au suivant et il va naturellement charger le TTF, il passera au fichier suivant jusqu'a trouver un fichier qu'il arrive à charger

Ensuite pour un effet propre, et prendre en compte les utilisateur de très vieux navigateur (tonton Jackie qui est resté sur IE5 parce qu'il sait pas mettre a jour depuis les 30dernières années :p) il faut que tu choisisses une police par défaut (font-family: calibri, sans-serif ça veut dire essayes de charge calibri, sinon tempis charges sans-serif)

Surtout ne télécharges pas la police sur ton PC, ça va fausser le résultat, en gros ça fonctionnera en local parce que ton PC est équipé de la police mais en production ton serveur il n'a pas la police, comme ça tu fera toujours bien attention à placer la police dans ton projet dans un dossier assets/fonts/

Encore merci! Je vais voir cela du coup!

Avec plaisir ;)