Ajouter une police à votre site Web Joomla!: Cufon font

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é (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.

 

Commentaires 12

Guest - laurent

le vendredi 6 janvier 2012 10:23

d'abord merci pour le tuto Malheureusement je n'arrive pas à faire fonctionner une des polices dont j'ai besoin. Il s'agit d'une police sous copyright dont j'ai acquit les droits spécialement pour un site (charte graphique du client oblige!).
J'ai trois polices distinctes installées 2 fonctionnent sur les 3...

/* Texte descriptif premiere page*/
Cufon.replace('.text1, .wrapper-box .boxTitle', { fontFamily: 'Apple Garamond Light' , hover: true });

/* Titres */
Cufon.replace('.text1-link, .wrapper-box-extra .boxTitle, .contentheading, div a.readon, .componentheading, .blog_more div ', { fontFamily: 'Girls are Weird' , hover: true });

Cufon.replace('.title-text', { fontFamily: 'Myriad Pro' , hover: true });

La police qui pose problème est en gras, une idée à me proposer?

d'abord merci pour le tuto :) Malheureusement je n'arrive pas à faire fonctionner une des polices dont j'ai besoin. Il s'agit d'une police sous copyright dont j'ai acquit les droits spécialement pour un site (charte graphique du client oblige!). J'ai trois polices distinctes installées 2 fonctionnent sur les 3... /* Texte descriptif premiere page*/ Cufon.replace('.text1, .wrapper-box .boxTitle', { fontFamily: 'Apple Garamond Light' , hover: true }); /* Titres */ Cufon.replace('.text1-link, .wrapper-box-extra .boxTitle, .contentheading, div a.readon, .componentheading, .blog_more div ', { fontFamily: '[b][u]Girls are Weird[/u][/b]' , hover: true }); Cufon.replace('.title-text', { fontFamily: 'Myriad Pro' , hover: true }); La police qui pose problème est en gras, une idée à me proposer?

Super User

(website) le lundi 30 avril 2012 07:05

Salut,

alors d'abord, désolé du délai, le commentaire m'avait échappé
Sinon, as-tu bien renseigné ta police pour "Bold typeface (optional)" dans le formulaire de Cufon?

Salut, alors d'abord, désolé du délai, le commentaire m'avait échappé ;) Sinon, as-tu bien renseigné ta police pour "Bold typeface (optional)" dans le formulaire de Cufon?

Guest - didrissi

(website) le jeudi 3 janvier 2013 00:09

Merci pour le tuto même ça marche pas chez moi
Il y a une chose qui m'échappe; le fichier: cufon-yui.js, vous n'avez pas expliqué comment on le créé.
Une autre chose
Dans le chemin /templates/template?> doit-on remplacer "template" pour le nom du template utilisé ou quoi?
Merci.

Merci pour le tuto même ça marche pas chez moi :( Il y a une chose qui m'échappe; le fichier: cufon-yui.js, vous n'avez pas expliqué comment on le créé. Une autre chose :D Dans le chemin /templates/template?> doit-on remplacer "template" pour le nom du template utilisé ou quoi? Merci.
Already Registered? Login Here
Guest
dimanche 26 janvier 2020

Image Captcha