Convertir vos polices pour le web

Avec la nouvelle spécification CSS3 : @font-face, on peut désormais utiliser avantageusement les polices de son choix et non plus se limiter à la dizaine de police, largement utilisée sur les PC (ARIAL, VERDANA…) depuis la création du web.
Cette contrainte fixée jusque là était lié au fait que les navigateurs ne savait gérer que les polices utilisées par votre système et donc afin de toucher le plus grand nombre nous utilisions les polices installer par défaut sur nos machines.
Ce temps là est révolu, désormais CSS3 permet de convoquer les polices souhaitées par une simple requête au serveur.

Génial me direz vous, mais attention là-aussi, il faut connaître les pré-requis.
Tout d’abord, chaque navigateur reconnaîtra son propre format de police ex : IE gère les polices au format EOT, alors que Chrome préfère les polices au format WOFF, voici à quoi cela ressemble

@font-face {
    font-family: "Conv_DINPro-Light";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/fonts/DINPro-Light.woff") format("woff"), url("fonts/DINPro-Light.ttf") format("truetype"), url("/fonts/DINPro-Light.svg") format("svg");
}

h2 {
    font-family: 'Conv_DINPro-Light', Sans-Serif;
}

Mais avant, il faudra convertir vos polices aux formats voulus, pour cela plusieurs outils existent :
Font Squirrel
font-squirrel
Font2web
font2web
A partir d’un fichier de police OTF ou TTF, l’outil génère automatiquement un pack de polices zippées aux formats utiles.

Il existe parfois des cas ou les polices PC sont du type AFM ou PFM, format non reconnu par ces outils, il faudra donc au préalable les transformer au format TTF avec un autre outil :
www.convertissez.fr
convertir-police

Les services de polices en ligne

Ces polices devront être bien-sûr installées sur le serveur du site, mais une autre solution est possible : Google Web Fonts un service web externe proposant des collections de fonts à inclure, gratuitement ou non. Adobe propose son service : typekit
Font Squirrel propose également des polices en ligne.



Laissez un commentaire