On va traiter dans ce mémo d'un problème tout bête mais crucial dès lors que l'on souhaite développer un site au design agréable : comment utiliser des polices qui ne se limitent pas aux traditionnelles Arial, Helvetica, Times et autres…
Il existe une solution simple grâce au CSS3 en utilisant la règle @font-face dont voici la syntaxe:
@font-face {
font-family: <an-arbitrary-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}
Commençons par une exemple simple. Une partie du code CSS de la page web que vous lisez actuellement est le suivant:
@font-face {
font-family: BonvenoCF;
src: url("./Fonts/BonvenoCF-Light.otf");
}
body {
padding:20px;
background-color:white;
color:black;
font-family:BonvenoCF;
}
On commence donc par introduire, grâce à la commande @font-face, une nouvelle police, que l'on appelera par la suite BonvenoCF-Light, et qui se trouve dans le sous répertoire Fonts (l'extension otf est un acronyme pour "opentype font").
Imaginons que vous utilisez la police times (qui ne requiert donc aucunement l'utilisation de la commande @font-face). Si vous décidez subitement de mettre un mot en gras (avec la balise <b>) ou en italique (avec la balise <i>), ce dernier est correctement mis en forme.
Par contre, dans l'exemple précédent, cela ne marche plus: il n'y a pas de modification de la police! La raison est la suivante: quand on ajoutait la police BonvenoCF-Light dans l'exemple précédent, on a en fait seulement inclus sa version droite. Les variantes grasse et italique sont donc absentes, ce qui explique que le navigateur ne les trouve pas.
Comment remédier au problème? Il suffit d'utiliser les attributs font-weight et font-style. Un exemple valant mieux qu'un long discours:
@font-face {
font-family: BonvenoCF;
src: url("./Fonts/BonvenoCF-Bold.otf");
font-weight: bold;
}
@font-face {
font-family: BonvenoCF;
src: url("./Fonts/BonvenoCF-Italic.otf");
font-style: italic;
}
On a simplement introduit les variantes de la police (sans changer son nom bien entendu).
Bien qu'implantée par la plupart des navigateurs récents (dernières versions de Firefox, Safari ou Chrome, mais pas IE…), @font-face reste une fonctionalité de la spécification 3 du CSS. Il faudra donc se prémunir en proposant systématiquement une police alternative. Par exemple:
body {
font-family:BonvenoCF,serif;
}
On pourra utiliser des polices OpenType (extension otf) ou TrueType (extension ttf). D'autres formats sont également utilisables, mais on prendra garde aux problèmes de compatibilité d'un navigateur à l'autre.
Un autre point important dans le choix de la police est celui relatif aux accents: en effet de nombreuses polices ne sont pas prévues pour notre belle langue…
Enfin, on prendra garde, comme toujours lors de l'utilisation de ressources extérieures, aux problèmes de droit.
Quelques liens sur l'emploi de la commande @font-face
Quelques sites permettant de télécharger / acheter des polices utilisables ensuite dans vos sites