Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (@plv) Dernière mise à jour : 23 April 2012

CSS3 - Font-Face

Introduction

Un tuto bêtement pratique sans aucune théorie pour mettre des fonts esothériques sur son site.

Je vous propose 2 méthodes :

Vous utilisez une police de caractère dont vous avez le fichier (ttf, ...)
Vous utilisez une font Google

Notons que ça marche dès IE6. L'antialiasling (lissage des polices) est différent suivant les navigateurs et les systèmes d'exploitation, cela dit pour des fonts de taille raisonnable, ça passe à peu près partout.

Vous avez le fichier de police

(hum... oui le titre me fait marrer...)

Allez sur le "Font Squirrel font-face generator", uploadez votre font. Vous récupérez un zip avec

Une CSS
La police encodée dans différents formats

Copiez le contenu du fichier CSS dans votre CSS et utilisez la nouvelle font comme n'importe quelle font.

Copiez la font encodée dans le répertoire qui va bien (en fonction de votre CSS).

/* Définition de la police en CSS */
@font-face {
    font-family: 'ITCAvantGardeGothicStdDemiCn';
    src: url('itcavantgardestd-demicn-webfont.eot');
    src: url('itcavantgardestd-demicn-webfont.eot?#iefix') format('embedded-opentype'),
         url('itcavantgardestd-demicn-webfont.woff') format('woff'),
         url('itcavantgardestd-demicn-webfont.ttf') format('truetype'),
         url('itcavantgardestd-demicn-webfont.svg#ITCAvantGardeGothicStdDemiCn') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Utilisation de la police */
h1 {
    font-family:  'ITCAvantGardeGothicStdDemiCn';
}

Utilisation d'une police Google

Allez sur http://www.google.com/webfonts

Hum... j'ose pas en rajouter... suivez les consignes du site, c'est hyper simple.

un petit exemple d'utilisation juste pour la forme.

Note sur les aspects juridiques

Les fonts de Google sont gratuites et opensource
Si vous utilisez une font sur un site, vérifiez que vous avez bien les licenses qui vont bien.

Conclusion

Vous étiez prévenu : aucune théorie. Du bête et pratique....

Si vous avez des remarques, n'hésitez pas à laisser des commentaires ci-dessous.

Commentaires

Note : on ne peut plus ajouter de commentaire sur ce site

Navigation