" target="_blank" rel="noopener">TransType. Pour vous assurer que la conversion a bien été effectuée correctement, il vous suffit d’ouvrir le fichier avec l’aperçu des polices de Windows. Ici une capture d’écran des version .ttf et .otf.
Normalement, vous devriez voir une différence très marquée entre les deux. La version avec les contours TrueType est pixélisée ; alors que la version avec les contours postscript est bien antialiasée. Dans le header de la police, le type de contour est spécifié.
Allez ensuite sur le générateur de kit font-face de fontsquirrel pour se créer un kit. Pour obtenir les version eot et svg de la font. Une fois le kit créé, on a les fichiers en .eot, .woff, .svg et .ttf. Ce générateur ne gère pas les contours PS, pour le fichier woff, on en utilisera un autre.
(Les fichiers à jeter peuvent aussi ne pas être généré en cochant les bonnes cases dans le générateur de font squirrel)
Il va maintenant falloir générer un fichier woff avec des contours postscript. Pour cela, vous allez utiliser un petit utilitaire : sfnt2woff. Téléchargez la version précompilée pour windows. Vous obtiendrez un petit .exe sur lequel il suffira de drag&droper le fichier au format .otf pour qu’un fichier .woff soit généré.
Vous êtes donc paré pour l’intégration et disposez des fichiers suivants :
Récapitulatif des cibles de chaque font :
Vous pouvez maintenant passer à l’intégration de votre font dans le code :
@font-face {
font-family: 'sanchezregular';
src: url('sanchez_-webfont.eot'); /*A*/
src: url('sanchez_-webfont.eot?#iefix') format('embedded-opentype'), /*B*/
url('sanchez_-webfont.woff) format('woff'), /*C*/
url('sanchez_-webfont.otf) format('opentype'), /*D*/
url(''sanchez_-webfont.svg) format('svg'); /*E*/
font-weight: normal;
font-style: normal;
}
L’ordre est très important. En résumé, le navigateur va prendre la première chose qu’il parvient à interpréter. Vous pouvez maintenant utiliser ‘sanchezregular’ pour la propriété font-family de votre CSS.
A : pour ie 6 et moins
B : pour ie 7 et 8
C : pour les navigateurs récents
D : pour les navigateurs plus anciens gérant l’otf
E : pour iOs
Voici une animation qui montre la différence entre le rendu obtenu avec la font en .ttf et la font en woff avec des contours postscript (Opera se comporte comme firefox) :