Le web avance et cet article date de janvier 2011, son contenu peut ne plus être pertinent ou d'actualité.

Import de polices en CSS (màj)

Cet article est en complément de l’article précédent : import de police en CSS3.

Comme expliqué dans un précédent billet, il est possible d’utiliser plusieurs méthodes afin d’utiliser différentes polices sur le web, outre Google Font ou Cufon (non cité précédemment), qui utilisent du javascript pour modifier les polices, il est possible de le faire nativement en CSS même pour Internet Explorer.

Cependant, il serait trop simple pour Internet Explorer d’importer directement un fichier standart ttf, il nous faut un fichier de police au format “eot”. Heureusement il existe aujourd’hui un outil en ligne afin de convertir ses polices : @font face generator.

Ainsi nous auront non seulement notre police en format eot pour Internet Explorer 5 à 8, ainsi qu’un format svg pour iOS (avant la mouture 4.2), mais aussi la police en format WOFF qui est un format compressé en Gzip pour les dernières version de Chrome, Firefox et Internet Explorer (9), qui devrait à terme devenir le standard web pour l’import de police. Le générateur créé aussi un fichier compatible avec le script Cufon.

@font-face {
font-family: 'Trial';
src: url('trial-webfont.eot');
src: url('trial-webfont.woff') format('woff'),
url('trial-webfont.ttf') format('truetype'),
url('trial-webfont.svg#webfontNwkXRkFW') format('svg');
font-weight: normal;
font-style: normal;
}

Par soucis de lisibilité, je n’ai pas utilisé de commentaires additionnels, mais les polices pesant de 50 à 300Ko en moyenne, il faudra voir à ne pas charger tous les fichiers pour ne pas alourdir inutilement la page.

Publié le par Edouard dans css