Charger une police dans un site Internet, IE vs CSS3

J’ai refait tout le thème de mon site Internet en privilégiant au maximum les instructions CSS3. Aujourd’hui, j’ai commencé à me pencher sur le cas d’Internet Explorer qui ne les supporte pas encore. La grande question était de savoir comment intégrer une police de caractère spéciale pour le site. Dans mon cas de figure, il s’agit de la police de type manuscrite qu’on retrouve dans les méta-informations du site et en légende des photos. En règle générale, avec CSS3, il suffit de copier le fichier de la police dans un sous-répertoire du site et de le précharger de la façon suivante.

@font-face {
	font-family : 'Aenigma Scrawl';
	src: url('fonts/aescrawl.ttf') format('truetype');
}

Une fois chargée, on peut alors l’utiliser avec les instructions habituelles de type font ou font-family. Dans le cas d’Internet Explorer, c’est sensiblement différent, car il faut utiliser une police EOT (Embedded OpenType) de Microsoft et limiter les paramètres, j’ai donc deux fichiers de police dans mon sous-répertoire et j’appelle celui de EI de la manière suivante.

@font-face {
	font-family : 'Aenigma Scrawl';
	src: url('fonts/aescrawl.eot');
}

Enfin, le petit truc intéressant est de savoir comment on peut transformer un TTF en EOT et pour cela je vous invite à utiliser le site Sebatian Kippe. Si vous voulez récupérer la police en question, il s’agit de Aenigma Scrawl.

2 réflexions au sujet de « Charger une police dans un site Internet, IE vs CSS3 »

  1. CSS3 apporte des nouveautés sympathiques.
    Tu feras attention, ta police manuscrite pixelise en petite taille (zoom x1 par défaut). Par contre si j’agrandi la page ça rend bien (mais c’est gros)

Laisser un commentaire

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