Dans ce nouvel article, nous allons voir comment utiliser une police d’écriture dite éxotique, c’est à dire qui n’est normalement pas destinée à une utilisation sur le Web.
D’abord, quelles sont les polices d’écriture ou fonts en anglais utilisées généralement sur Internet?
Eh bien il n’y en a pas une dizaine! En effet, lorsqu’on parcours un peu le Web on se rend compte que les polices utilisées sont le plus souvent Times New Roman, Times, Helvetica, Verdana, Arial et Trebuchet, et ceci pour une bonne raison : ce sont toutes des polices intégrées d’origine dans nos ordinateurs, que ce soit Mac ou PC.
Maintenant, qu’est-ce qu’une font exotique?
Une police d’écriture exotique ce sont toute les fonts que l’on peut trouvées en téléchargement sur des sites comme le très connu Dafont.com qui propose de nombreuse polices en tout genre à installé sur l’ordinateurs. C’est d’ailleur une très bonne ressource pour les designer web et autre graphiste car ces polices permettent de diversifier nos travaux. La police que j’utilise d’ailleurs pour les titres de mes articles est la font Qlassik disponible gratuitement sur sur Dafont.
Maintenant qu’on sait çà, voyons voir comment l’utiliser sur nos sites Internet.
Comment utiliser une police exotique sur Internet?
Il faut savoir qu’il y a plusieurs façon de mettre en oeuvre une telle police sur un site Internet, notament en utilisant Javascript, Flash, les CSS3, ou encore une image.
Commençons d’abord par la methode la plus simple à mettre en place, mais pas forcement la plus pratique : l’utilisation d’images
1ère methode :Remplacer du texte par une image avec les CSS
Il faut savoir que cette technique n’est pas adaptée suivant l’utilisation qu’on en fait. En effet, cette technique est utile pour par exemple remplacer le titre de notre site par notre logo. Au contraire, utiliser ce procédé pour remplacer le titre des articles d’un blog est une chose vraiment fastidieuse et demandant vraiment trop de travail.
Ici sur AngeChierchia.com le logo est enfait une balise <h1> avec un identifiant afin de stylisé le texte entre les balises <h1> et </h1>, dont voici le CSS :
h1#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:368px; height:84px;
display:block;
float:left;
text-indent:-999px;
border:none;
}
Les propriétés importantes ici, sont background-image qui permet de mettre une image de fond, width et height qui permettent de dimensionner la zone de notre H1, et text-indent: qui permet de dire à notre balise H1 que le texte qu’elle contient doit être indenté, ici le texte sera décalé de 999 pixels à gauche donc non visible.
2ème methode : remplacer du texte en utilisant Javascript et Cufón ou Flash et sIFR
La seconde methode est celle qui est le plus répendue actuellement, on l’appelle aussi Advanced Image Remplacement (remplacement par l’image avancé). Ici on utilise plus du tout CSS et une image, mais plutot Javascript si on choisi d’utiliser le script Cufón, ou encore Flash si on utilise sIFR.
Ici, je ne vais pas vous montrer comment utiliser sIFR ou Cufón, on verra çà dans un prochain article. Sachez juste que sur ce blog j’utilise Cufón pour styliser mes balises h1, h2 et h3.
3ème methode : la règle @font-face de CSS3
Bien que cette methode soit la plus récente et la plus simple à mettre en place, certaines polices ainsi que certain type de fichier ne sont pas bien supporté. Pour utiliser notre police on doit donc d’abord la déclarer dans notre feuille de style en utilisant la règle @font-face qui permet de dire à notre site d’utilisé la police se trouvant à tel endroit sur notre serveur. En quelque sort c’est l’équivalent de la propriété background-image.
Une fois la police déclarée, on pourra l’utilisé avec la propriété font-family.
@font-face { //on déclare notre police
font-family: "Qlassik";
src : url("chemin/vers/Qlassik.otf");
}
h1 { //on utilise notre police pour tous les élément h1
font-family: "Qlassik", helvetica, arial;
font-size: 24px;
}