Utiliser Font-Face pour intégrer des polices de caractères

Pour utiliser des polices de caractère originales, il y a plusieurs méthodes possible…
Nous avons déjà vu les possibilités par javascript de Cufon, voyons maintenant la solution CSS3 avec @font-face. L’avantage évident de font-face, c’est que l’utilisateur n’a pas besoin de posséder la police utilisée sur son ordinateur car le navigateur ira directement la chercher sur votre site ou via Google Web Fonts.
Cela offre également une meilleure visibilité pour le développeur puisque les polices de caractères apparaissent directement dans le css.

@font-face est compatible avec les navigateurs suivants :

• Internet Explorer 5.5+
• Firefox 3.5+
• Opera 10+
• Safari 3.1+
• Chrome 2.0+
• iOS 4.2+
• Opera Mobile 10+
• Android 4+

Voyons comment intégrer @font-face dans la feuille de style de vos projets web.

A mettre dans votre CSS :

@font-face{
font-family : « nomDemaFonte »;
src : url(‘nomDemaFonte.eot’); // Pour IE9 en mode Compatibilité
src : url(‘nomDemaFonte.eot?’) format(‘eot), // Pour Internet Explorer
// pour les autres
url(‘nomDemaFonte.woff’) format(‘woff’),
url(‘nomDemaFonte.svg#abcd’) format(‘svg’),
url(‘nomDemaFonte.ttf’) format(‘truetype’);
}

Ensuite, il suffit d’appeler la police dans votre feuille de style :

h1{font-family : « nomDemaFonte », Helvetica, Arial, sans-serif;}

Comment trouver des polices avec les différents formats @font-face ?

Avec Font-Squirrel, tout devient simple, ce service vous fourni un @font-face generator qui permet de convertir toutes vos polices.

Avec ttf2eot qui permet également la conversion de vos polices en .ttf et en .eot.

Avec Google Web Fonts, c’est encore autre chose, vous n’avez plus besoin d’heberger vos polices sur votre site. Google Web Fonts est un service web externe permettant d’inclure des collections de fonts sur votre site.
L’avantage, des serveurs performants et un vaste choix de polices de caractère à intégrer avec @font-face. Il suffit de copier/coller un bout de code dans l’en-tête de votre site pour pouvoir profiter de la police dans votre CSS avec @font-face.

Jetez un oeil dans les articles conseillés ci-dessous pour apprendre comment utiliser font-face avec Google Web Fonts.