Ajouter Cufon à votre site Joomla!:

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.

Cufon Fonts (ou simplement Cufon) est une bibliothèque JavaScript open source qui permet de remplacer les polices de caractères standard d'un site web par des polices personnalisées. Cufon utilise une technique de rendu vectoriel pour afficher les polices personnalisées dans le navigateur, ce qui permet d'obtenir des effets typographiques avancés tels que des ombres, des dégradés et des formes complexes.

Cufon se compose de deux composants principaux : un script qui convertit les polices personnalisées en un format vectoriel spécialisé, et un script JavaScript qui charge et affiche les polices dans le navigateur. Les polices sont créées à l'aide d'un outil tiers appelé Cufon Generator, qui permet de convertir des fichiers de police standard (TTF ou OTF) en fichiers compatibles avec Cufon.

Cufon est facile à utiliser et peut être implémenté sur un site web en ajoutant simplement le script Cufon au code HTML et en appelant la fonction Cufon.replace() pour remplacer les éléments de texte sélectionnés par les polices personnalisées. Cependant, son utilisation peut poser des problèmes de performance sur des sites web avec de nombreux éléments de texte, car chaque police personnalisée doit être chargée séparément par le navigateur.

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é (pour il s'appelle VistaSansBook_500.font.js).

2- Téléchargez la librairie cufon-yui nécessaire:

Téléchargez ensuite la librairie Cufon en cliquant sur l'onglet download : vous obtiendrez alors le fichier cufon-yui.js.

3- 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">

4- 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.

5- 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.