Comment utiliser une police originale sur son site web ?

Partagez si vous aimez ->

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');
}
N’oubliez pas de mettre les fichiers NomPolice-Regular.ttf et NomPolice-Bold.ttf dans le même dossier que votre fichier CSS.

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 .

<!-- &#91;if lte IE 9&#93;>
 	<link rel="stylesheet" type="text/css" href="/internet-explorer.css" media="screen" />
<!&#91;endif&#93;-->

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 ?

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons