@font-face ou Comment choisir une police non standard

la règle CSS @font-face permet d'utiliser des familles de police non standards. Ces polices seront  hébergées sur notre site web et nous ne seront ainsi plus limités par celles présentes sur la machine de l'internaute.

Pour utiliser une font original, il suffit de faire son marché sur l'un des sites proposant des polices libres de droit tels que http://www.dafont.com/fr/. 

Choisissez une police (disons qu'elle s'appelle MaNouvelleFont), puis d'utiliser l'utilitaire de fontsquirrel, qui va vous générer un kit pour la police prêt à l'emploi (ce kit comprend la police au format adapté pour chaque navigateurs)

Téléchargez ce kit, et copiez le dans un répertoire de votre site que je nomme ici font

Enfin, dans votre feuille de style, rajoutez maintenant la déclarationde votre nouvelle police de nom MaNouvelleFont (remplacez MaNouvelleFont par le nom de votre police

Dans votre fichier CSS :

Déclaration de la nouvelle police présente dans le répertoire font, puis appel à cette nouvelle police via la propriété font-family

/* ---------- fonts ---------- */
@font-face {
    font-family: 'NomDeMaNouvelleFont';
    src: url('font/MaNouvelleFont.eot');
    src: url('font/MaNouvelleFont.eot?#iefix') format('embedded-opentype'),
         url('font/MaNouvelleFont.woff') format('woff'),
         url('font/MaNouvelleFont.ttf') format('truetype'),
         url('font/MaNouvelleFont.svg#MaNouvelleFont') format('svg');
    font-weight: normal;
    font-style: normal;

}
body
{  font-family: NomDeMaNouvelleFont,Times,serif;}

J'avoue que depuis que j'ai découvert Google Web font, j'utilise de préférence leur service voir le mémo dédié à Google Web Font.