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

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.

Super User

(website) le lundi 7 janvier 2013 13:08

Bonjour,

A la fin du paragraphe 1 j'avais écrit: "Téléchargez la librairie Cufon en cliquant sur l'onglet download" => il s'agit en fait du fichier cufon-yui.js.

Pour template il faut effectivement remplacer template par le nom du template utilisé.

Si tu as d'autres questions n'hésite pas

Bonjour, A la fin du paragraphe 1 j'avais écrit: "Téléchargez la librairie Cufon en cliquant sur l'onglet download" => il s'agit en fait du fichier cufon-yui.js. Pour template il faut effectivement remplacer template par le nom du template utilisé. Si tu as d'autres questions n'hésite pas ;)

thanks for share.. very usefull

thanks for share.. very usefull

Guest - Margahayuland

(website) le samedi 18 mai 2013 12:53

Merci pour le tutoriel ne fonctionne même pas pour moi quelque chose qui m'échappe fichier: Cufon-yui.js, vous n'avez pas expliqué comment il est créé. Tout autre chose dans le chemin / templates / template?

Merci pour le tutoriel ne fonctionne même pas pour moi quelque chose qui m'échappe fichier: Cufon-yui.js, vous n'avez pas expliqué comment il est créé. Tout autre chose dans le chemin / templates / template?

Super User

(website) le lundi 20 mai 2013 16:44

Bonjour,

visiblement, ce point n'était pas clair dans mon tuto désolé! J'ai réécrit, j'espère que c'est plus compréhensible maintenant. En fait après avoir généré ton fichier js custo lié à ta police, il faut télécharger le fichier cufon-yui.js en cliquant sur l'onglet Download du site http://cufon.shoqolate.com/generate/.
(C'est le premier onglet).

Bonjour, visiblement, ce point n'était pas clair dans mon tuto désolé! J'ai réécrit, j'espère que c'est plus compréhensible maintenant. En fait après avoir généré ton fichier js custo lié à ta police, il faut télécharger le fichier cufon-yui.js en cliquant sur l'onglet Download du site http://cufon.shoqolate.com/generate/. (C'est le premier onglet).

Guest - kacimi

le mardi 26 novembre 2013 08:54

Aidez moi svp; j ai fait toutes les renseignement mais malheureusement j ai pas reussi à changer la police de mon site joomla
voici le message d'erreur:
( ! ) Fatal error: Call to undefined function artxGetContenftCellStyle() in C:\wamp\www\site-localhost-20131004-161339\templates\joomlarab016_egypt_algeria\index.php on line 65 Call Stack #TimeMemoryFunctionLocation 10.0010385408{main}( )..\index.php:0 21.447910791168JSite->render( )..\index.php:79 31.448910791672JDocumentHTML->render( )..\application.php:168 41.454310794256JDocumentHTML->_loadTemplate( )..\html.php:246 51.457110872128require_once( 'C:\wamp\www\site-localhost-20131004-161339\templates\joomlarab016_egypt_algeria\index.php' )..\html.php:338
exemple de changement:script src="/baseurl; ?>/templates/template?>/js/cufon-replace.js"> je l ai changé par
script src="/baseurl; ?>/templates/joomlarab016_egypt_algeria?>/js/cufon-replace.js"> c'est juste ou nn??,

Aidez moi svp; j ai fait toutes les renseignement mais malheureusement j ai pas reussi à changer la police de mon site joomla voici le message d'erreur: ( ! ) Fatal error: Call to undefined function artxGetContenftCellStyle() in C:\wamp\www\site-localhost-20131004-161339\templates\joomlarab016_egypt_algeria\index.php on line 65 Call Stack #TimeMemoryFunctionLocation 10.0010385408{main}( )..\index.php:0 21.447910791168JSite->render( )..\index.php:79 31.448910791672JDocumentHTML->render( )..\application.php:168 41.454310794256JDocumentHTML->_loadTemplate( )..\html.php:246 51.457110872128require_once( 'C:\wamp\www\site-localhost-20131004-161339\templates\joomlarab016_egypt_algeria\index.php' )..\html.php:338 exemple de changement:script src="/baseurl; ?>/templates/template?>/js/cufon-replace.js"> je l ai changé par script src="/baseurl; ?>/templates/joomlarab016_egypt_algeria?>/js/cufon-replace.js"> c'est juste ou nn??,

Super User

(website) le mardi 26 novembre 2013 10:01

L'appel à la librairie cufon ne semble pas liée à votre message d'erreur:
"( ! ) Fatal error: Call to undefined function artxGetContenftCellStyle() " semble faire référence à une fonction de votre template, c'est une erreur PHP, Cufon est une librairie js. Je pense que vous devriez essayer de supprimer les appels à la librairie Cufon, vous constaterez que votre message d'erreur est toujours présent je pense.

L'appel à la librairie cufon ne semble pas liée à votre message d'erreur: "( ! ) Fatal error: Call to undefined function artxGetContenftCellStyle() " semble faire référence à une fonction de votre template, c'est une erreur PHP, Cufon est une librairie js. Je pense que vous devriez essayer de supprimer les appels à la librairie Cufon, vous constaterez que votre message d'erreur est toujours présent je pense.

Guest - termpaperwriter

(website) le samedi 8 février 2014 15:49

I am grateful for the article. It is very informative for me.

I am grateful for the article. It is very informative for me.

Guest - hugolasticot

(website) le lundi 3 mars 2014 19:00

Bonjour pourquoi ne pas simplement utiliser la commande :

@font-face { font-family: "Roboto Lt"; src: url('../font/Roboto-Light.ttf'); }

dans votre fichier template.css ?

Bonjour pourquoi ne pas simplement utiliser la commande : @font-face { font-family: "Roboto Lt"; src: url('../font/Roboto-Light.ttf'); } dans votre fichier template.css ?

I'm thankful a lot for help. I had a problem in this area.

I'm thankful a lot for help. I had a problem in this area.
Pas encore de commentaire
Already Registered? Login Here
Guest
samedi 8 août 2020

Image Captcha

By accepting you will be accessing a service provided by a third-party external to https://www.pulsar-informatique.com/