Il est désormais possible d'utiliser les polices autres que les polices dites "web-safe", néanmoins il reste l'aspect légal : vous ne devez pas reprendre n'importe quelle police sur votre disque dur pour les proposer en ligne.

Le style, c'est beau

Nous allons donc voir ici comment faire, et c'est d'une simplicité enfantine avec quelques outils et quelques lignes de css.
On attaque par le plus simple les CSS :

@font-face {  
	  font-family: " Nom de la police ";  
	  src: url(/chemin/vers/police/nomPolice.eot ); /* IE */  
	  src: local("nom système de la police"), url( /chemin/vers/police/nomPolice.ttf ) format("truetype"); /* non-IE */  
	}  
	 
	/* Appliquez aux sélecteurs souhaités votre police */  
	.votrePolice { font-family:" Nom de la police ", verdana, helvetica, sans-serif;  
	}

Comme vous le constatez à la lecture du code CSS il y a 2 sources déclarées dans la règle @font-face :

  • Une pour Internet Explorer (toutes versions) avec un format spécifique .eot
  • Une pour les autres navigateurs supportant la règle standard .ttf

Note : Il serait bien vu d'ajouter une source de police en .woff (puisqu'il s'agit du format de police vers lequel le web s'oriente)

Le plus beau c'est que ça marche pratiquement partout (je n'ai pas testé les versions de Firefox et safari antérieure à la 3 ou opéra antiéreure à la 10). La question à se poser maintenant c'est comment je fais pour avoir des fontes dans le bon format ?

Les outils, pour de bons ouvriers

Il existe de nombreux logiciels de conversion de police, mais la plupart d'entre eux sont payants, donc pour les ceux qui ne peuvent pas les acheter voici quelques outils en ligne :

Les polices, belles et lisses

Et pour finir en beauté avec ce billet sur les polices embarquées, quelques sites qui listes des polices libres :