Il arrive que certains clients exigent une police/font bien particulière, comme la font VistaSansBook, qui n'est bien sûr pas une police Web.

Pour y remédier, vous pouvez utiliser Cufon, qui vous permettra de générer une font js que vous pourrez ensuite charger sur votre site.

Comment procéder?

1- Générez le fichier javascript correspondant:

Rendez-vous sur la page http://cufon.shoqolate.com/generate/

Récupérez le fichier de font au format ttf pour le charger dans le formulaire pour Regular typeface et cochez la case "The EULAS of thes fonts allow web embedding", Basic Latin et Latin-1 Supplément.

(Je ne décris ici que le cas d'une utilisation simple, si vous avez besoin d'une font en gras, il faudra bien sûr charger la font correspondante dans bold typeface, si vous avez besoin de la ponctuation, il vous faudra renseigner le champ Punctuation, etc. Essayez toujours de ne prendre que le "minimum vital" en ne perdant pas de vue que plus vous ajouterez de caractères, plus votre fichier js sera lourd, ce qui aura un impact sur les performances.)

Cochez la case "I acknowledge and accept these terms" et cliquez sur le bouton "Let's do this", votre fichier javascript sera généré.

Téléchargez la librairie Cufon en cliquant sur l'onglet download

2- Ajoutez ces fichiers au template: ajoutez dans le répertoire du template ces fichiers,  de préférence dans un répertoire à part, pour plus de clarté, ici j’ai choisi de les mettre dans un répertoire js dans mon répertoire de template.

Appelez les fichiers dans le fichier index.php du template par ces lignes:

script type="text/javascript" src="/baseurl; ?>/templates/template?>/js/cufon-yui.js">

script type="text/javascript" src="/baseurl; ?>/templates/template?>/js/VistaSansBook_500.font.js">

3- Précisez pour quels éléments vous souhaitez cette police:

Il ne reste plus qu’à « dire » au navigateur quels éléments doivent être remplacés, pour cela on crée le fichier cufon-replace.js dans ce même répertoire js

et on l’insère au template en ajoutant cette ligne :

script src="/baseurl; ?>/templates/template?>/js/cufon-replace.js">

Et dans ce fichier on écrit:

Cufon.replace('.contentheading h1,#spahis h2',  { fontFamily: "VistaSansBook" , hover: true });

Ce qui signifie: remplace tout les h1 dans un élément de classe contentheading, et tous les h2 dans un élément d’id spahis par la font-size VistaSansBook au moyen de Cufon. Cette ligne est bien sûr à adapter selon vos besoins.

4- Activer Cufon:

Ecrire à la fin du fichier de template, juste avant la fermeture de la balise body

Cufon.now();

Il faut bien noter que les polices réécrites ne fonctionnent pas comme les polices normales, il faut donc bien vérifier l’affichage. Certaines surprises attendent à l’arrivée parfois.