Comment utiliser une police originale sur son site web ?
Comment utiliser une police originale sur votre site web ? La méthode que nous allons voir repose sur le css. Elle n’alourdira pas votre code comme le fait la librairie javascript « Cufon ». Apprenez aussi comment contourner le problème « Internet Explorer ».
Vous avez déniché une police originale qui met en valeur votre contenu. Vous avez essayé de la mettre sur votre site en utilisant la propriété « font-family ». Malgré vos efforts, elle n’apparaît pas.
Que se passe-t-il quand la police ne s’affiche pas ?
Pour qu’une police s’affiche sur un site web, elle doit exister sur l’ordinateur. Le jeu de polices qu’on appelle « standard » ou « web safe », désigne en fait les polices communes aux différents systèmes (Linux, Mac, Windows…).
Ces polices sont très connues. Ces noms vont diront sûrement quelque chose: Arial, Helvetica, Comic Sans MS, Courier, Georgia, Lucida Grande, Palatino Linotype, Times New Roman, Trebuchet MS, Helvetica, Verdana… et bien d’autres.
Evidemment, un ordinateur ne possède pas toutes les polices au monde !
Si vous utilisez une police exotique sur votre site, vous devez indiquer à l’ordinateur _ou plutôt au navigateur_ de la télécharger afin de pouvoir l’utiliser.
Comment importer sa propre police ?
C’est le rôle de la propriété « @font-face ».
/* Déclaration de la police */
@font-face {
font-family: "Le Nom de la Police";
src: url('NomPolice-Regular.ttf');
}
/* Déclaration de la police version "gras" */
@font-face {
font-family: "Le Nom de la Police";
font-weight: bold;
src: url('../fonts/'NomPolice-Bold.ttf');
}
Ensuite, vous pourrez l’utiliser de façon habituelle :
/* Utilisation de la police "regular" */
*{
font-family: "Le Nom de la Police";
}
/* Utilisation de la police "bold" */
.bold{
font-weight: bold;
}
/* Utilisation de la police "italic":
/* comme elle n'a pas été déclarée, ceci ne fonctionnera pas */
.italic{
font-style: italic;
}
Le problème d’Internet Explorer
Le format compatible
Internet Explorer ne comprend le format .ttf que depuis la version 9.
Comment faire avec les versions antérieures ? Il faut utiliser le format.eot.
Convertir ses fichiers .ttf en .eot
Pour convertir vos fichiers, vous pouvez utiliser cet outil en ligne gratuit.
Ciblez Internet Explorer 6, 7 et 8
Ciblez ces versions avec une feuille de style alternative .
<!-- [if lte IE 9]> <link rel="stylesheet" type="text/css" href="/internet-explorer.css" media="screen" /> <![endif]-->
Importez les polices grâce à ce fichier CSS
/* Utilisation de la police "regular" */
@font-face {
font-family: "Le Nom de la Police";
src: url('NomPolice-Regular.eot');
}
/* Utilisation de la police "bold" */
@font-face {
font-family: "Le Nom de la Police";
font-weight: bold;
src: url('../fonts/'NomPolice-Bold.eot');
}
Pour une implémentation plus rigoureuse, je vous conseille cet excellent billet de Paul Irish (en anglais, niveau CSS confirmé) :
Où trouver de telles polices ?
C’est un sujet que je n’ai pas encore exploré en pratique. Mais comme je souhaite changer la police sur ce blog, je m’y intéresse.
Dans mes recherches, je me suis arrêtée sur deux ressources très connues:
Si je n’y trouve pas mon bonheur, je poursuivrai ma recherche. Je suis sûre que de nombreux autres sites existent.
Je suis tombée au hasard sur ce site qui propose de créer sa propre police, basée sur son écriture. Ca pourrait être marrant, mais il existe peut-être un meilleur service. A approfondir 🙂
Sources
Comment utiliser une fonte «non-standard» sur un site Web ?
