Installer une police non-standard en CSS

Tout d’abord, vous pourriez me reprocher une longue absence de deux mois. Mais rappelez-vous que ce blog a pour but de vous faire partager mes souffrances quand je développe du code, du HTML ou autres fariboles. Partager mes souffrances certes, mais aussi les solutions que j’ai trouvées …

Et donc pendant deux mois, j’ai assez peu développé, bien que je n’aie pris que trois jours de vacances. Et les petits développements n’ont posé aucun problème. Mais là, aujourd’hui, jour de la Saint Laurent (et donc Laurence – Bonnes Fêtes à toutes les Laurence que j’ai connues, mais là je m’égare), je replonge : j’ai décidé de relooker complètement mon site principal derniersparus.com. Et ça commence fort.

Problématique

Vous en avez un peu marre de Helvetica, Arial. Ne parlons pas de Times Roman ou Garamond qui sont des polices splendides mais totalement inadaptées aux pages Web, enfin c’est mon opinion. Calibri est un petit rayon d’harmonie et de lumière dans un monde de gribouillis. Mais vous avez envie d’afficher une police non-standard qui a peu de chances d’être sur la machine du fan de votre site. Comment faire ?

Solution

Dès le CSS2 est apparue l’instruction @font-face, mais seul Internet Explorer l’a correctement implémentée. Depuis CSS3, c’est chose faite. Il suffit de la déclarer dans votre CSS de la manière suivante (je prends l’exemple d’Unibody 8) :

@font-face {
    font-family: "Unibody";
    font-style: normal; 
    src: url('[lechemin]/Unibody 8-Regular.otf');
}
@font-face {
    font-family: "Unibody";
    font-style: italic;
    src: url('[lechemin]/Unibody 8-Italic.otf');
}
@font-face {
    font-family: "Unibody";
    font-weight: bold;
    src: url('[lechemin]/Unibody 8.otf');
}

  • [lechemin] indique évidemment le répertoire du site où vous avez rangé le fichier source de votre police
  • vous avez noté qu’on a déclaré les 3 types de polices : normal, italique et bold : vous pouvez en faire plus

Vous pourrez donc utiliser votre nouvelle font dans le corps de votre page, par exemple avec la balise :

<span style=’font-family:Unibody’>Elle est belle ma police ! Mais qu’elle est belle !</span>

Vous pourrez même l’utiliser dans une feuille CSS de la manière suivante :

#majoliepolice{
font-family: Unibody;
}
@font-face {
font-family: Unibody;
font-style: normal;
src:url(‘[lechemin]/Unibody 8-Regular.otf’);
)

mais ne me demandez pas pourquoi, veillez bien à mettre la déclaration @font-face APRÈS son appel dans le style. Déclarer une « variable » après son utilisation, c’est étrange, mais « Il y a plus de choses dans le ciel et sur la terre, Horatio, que n’en rêve votre philosophie. » Hamlet, William Shakespeare (tous les informaticiens ne sont pas d’incultes geeks que diantre ! palsembleu ! cornegidouille !).

ET LE TOUR EST JOUÉ ! ALORS ON DIT MERCI QUI ?