Polices exotiques

Abandonnée en CSS2, la propriété @font-face réintégrée à CSS3 permet d'afficher une police exotique embarquée sur le serveur.

Avant toute utilisation de police non standard sur votre site web, prenez garde à deux points essentiels :

Comme toute œuvre artistique, une fonte est soumise à des droits d'auteurs. Peu sont libres de droits;

L'ensemble du fichier est téléchargé même si vous n'utilisez que quelques caractères. Certaines fontes pèsent plus de 1Mo et vont considérablement ralentir l'affichage de votre document.

Les navigateurs modernes tels qu'Opera 10, Firefox 3.5, Safari 3 et Chrome 4 reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu'un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .ttf (ou .otf) pour le commun des mortels, et une version .eot pour IE.

Fort heureusement, de plus en plus d'outils proposent de vous prémâcher le travail, c'est le cas de Font-Face Generator de Font Squirrel.

Dans le cas de Goetter.fr, la fonte utilisée est "Hit The Road", une police libre et gratuite de 9 Ko réalisée par Matthew Welch.

Une fois vos fichiers convertis à l'aide de Font-Face generator, il vous suffit de les appeler dans vos feuilles de styles de la sorte :

Version pour tout le monde, incluant uniquement la version truetype .ttf :

@font-face { font-family: 'NewRegular'; src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}
Version prévue dans la feuille de style dédiée à Internet Explorer à l'aide de commentaires conditionnels, incluant la version .eot :

@font-face { font-family: 'NewRegular'; src: url('fonts/HITROAD.eot');
}
Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family,