Ajouter Cufon à votre site Joomla!:

184825 vues
11 novembre 2011
Raphaëlle
cufonfonts

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.

Paramètres hikashop des items de menu
SOBI Pro: le menu principal ne s'affiche pas
Pulsar sponsor OR du JoomlaBusiness 2015
Elections 2016 ... le CMS Joomla! encore
Critère de correspondance pour la recherche SEBLOD
Pulsar developpe la passerelle Joomla LUCENE SOLR
Pulsar forme au CCK SEBLOD pour Joomla!
Fenêtre coulissante avec Joomla et Seblod
Workflow et formulaires faciles avec Joomla! et Seblod 3/4
Comparaison des CCKs pour Joomla!
Job board intégré à votre site Joomla!
Edition front end avec Hikashop et Virtuemart
Extensions Joomla: accessibilité, menu vertical et réseaux sociaux
Une agence web Joomla! au Drupagora
Comprendre les droits et niveaux d'accès de Joomla!
E-commerce avec Seblod
com_search joomla 2.5 recherche sans accents
Sommaire automatique pour Joomla
Astuces PHP lazy load sous joomla seblod warp
Les solutions multi sites avec Joomla!
CMS Day: Joomla pour les projets du secteur public
Soirée CMS open-source en PHP
JoomlaDay 2015: Pulsar y était!
Pulsar présente JOOMLA à AGORA CMS
Transformer un article en contenu SEBLOD
Quelles extensions choisir pour son site joomla ?
Workflows généralisés avec Joomla! et Seblod (partie 4)
Pulsar, le JoomlaDay et Israël
GED Open Source simple pour les PME
Pulsar présente son expertise SEBLOD au JoomlaDay 2013
Pulsar et Joomla pour les sites évolués au JoomlaDay 2014
Super BreadCrumb for Joomla 1.5 1.6 & 1.7
Joomla! présent au salon AGORA CMS 2016
Joomla! à nouveau élu meilleur CMS 2017
Workflow Joomla! évolué avec Seblod 2/4
Pulsar présente le projet pour la Sorbonne au JoomlaDay!
Sites multi langues mobiles avec Joomla et Seblod
Joomla et les CCK
Les nouveautés de Joomla! 4
SEBLOD et J2store au JoomlaDay Israël 2017
Workflows évolués pour Joomla! avec Seblod 1/4
3 nouvelles extensions Joomla! de Pulsar dans la JED
Correctif de Pulsar dans le routeur de Joomla
sh404SEF: URLs n'apparaissent pas
Pulsar présente le JoomlaBusiness à l'AFUP
Monétisez votre workflow avec Joomla!
Astuce: suppression des éléments Seblod
Joomla! meilleur CMS PHP Open Source
Import shipping pour hikashop
Pulsar certifie ses formateurs Joomma!
Référencement naturel, cocons sémantiques et Joomla!
Chasse aux bugs des templates Warp
Plugin merge css/js pour Joomla
JCEmediabox et css js compress
Ajouter une icône d'édition dans une liste SEBLOD
Virtuemart: flèches quantité ne fonctionnent pas
Optimisation et vitesse de votre site Joomla!
Pulsar au JoomlaDay Israel 2016
Les avantages de Joomla! face à Drupal
Pulsar gagne l'appel d'offre de la Sorbonne
Developpements pour la Bibliotheque Mazarine
Pulsar présente le job board du nouveau site web Dynamique Emploi
Projets multi langues et multi sites avec Seblod
Nouveau site de Pulsar avec Seblod!
L'agence Pulsar sponsorise le JoomlaDay 2015
Indiegogo: contrôle de version avancé avec SEBLOD
Advanced module manager et page d'accueil
Pulsar au JoomlaDay 2014: Chaine de production
Entrées grisées avec la mention [extrait] dans DOCMAN
Les solutions e-commerce avec Joomla!
Joomla 4 : professionnalisation et performance
JoomlaDay 2015: Joomla! pour les applis pro
Un nouveau routeur pour Joomla!
Pulsar sponsor du Joomladay
Chargement Joomla avec Mootools de Google
Pulsar présente le CMS Joomla! au club STARINUX
Pourquoi nous avons ajouté WordPress à notre offre
Joomla! fête ses 10 ans!
Multisites, multilangues et multidevices pour la SORBONNE
Comprendre le stockage des données avec SEBLOD
Joomla meilleur cms open source 2011
Pulsar primé pour le site de la Sorbonne
Personnalisation du backoffice de Joomla!
Gestion Electronique de Documents sur mesure
Plugin de cache Joomla : les images ne s'affichent pas
SEBLOD: supprimer un script à moindre coût
Ajouter le bouton DOCLINK avec Jevents et SobiPro
l'AFUJ exposant au salon Open Source Summit 2015
Pulsar, sponsor OR du JoomlaDay 2017
Override joomla du template 'category' lié à un menu
Développement multi sites avec Joomla et Seblod