Depuis l’apparition des navigateurs modernes, une chose extraordinaire est née la @font ! finit les titres en image png transparent pour utiliser une belle police. Vive le @font !
Mais pour ce faire il faut décliner votre police dans tous les formats possibles pour mac, pc, IE, chrome …
@font-face {
font-family: ‘Mapolice’;
src: url(‘fonts/Mapolice.eot’);
src: url(‘fonts/Mapolice.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/Mapolice.woff’) format(‘woff’),
url(‘fonts/Mapolice.ttf’) format(‘truetype’),
url(‘fonts/Mapolice.svg#Mapolice’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Avec ça aucun risque d’incompatibilité sauf avec les vieux navigateurs.
Mais comment trouver tous les format de votre police le .eot, le.woof , le .ttf , le .svg ? Si vous n’avez que le .ttf (par exemple).
Il y a le site http://www.fontsquirrel.com/fontface/generator mais qui maintenant est regardant aux droits d’auteurs (pas très pratique) mais il existe d’autres sites moins regardant et le plus complet qu’on a trouvé est http://www.font2web.com/ très simple, rapide et discret , il vous zippera un dossier avec tous les formats de police existant.
Plus d’excuse pour ne pas utiliser le@font-face .
A noter que 2 formats cumulés seulement assureront la compatibilité :
Pour IE, 6 et + : .eot est d’application
Pour le reste (Firefox, Chrome, Safari, Opera), un seul des formats suivant suffira : .ttf, .otf, .woff, ou .svg.
Yordi
Un logiciel desktop que tu garde au chaud sur ta machine serai tellement sympa 🙂
Tu en as un a proposer ?