Cufon est pour moi l’outil le plus facile à prendre en main pour utiliser vos polices d’écriture favorites sur votre site internet. Il n’y a pas besoin d’installer de plugin sur votre navigateur, il fonctionne sur tous les navigateurs majeures du moment, il n’y a presque aucune configuration à faire et il est rapide même sur du texte conséquent.
Il utilise le Javascript pour calculer les tracés vectoriels à partir de fichiers générés à l’aide de vos polices d’écriture aux formats TTF, OTF, PFB. Il faudra bien sûr aussi télécharger puis inclure la librairie Cufon et sélectionner les caractères pouvant être utilisés (alphanumériques, latins, ponctuation, cyrillique…) ce qui en augmentera la taille d’autant. (Je vous donnerez quelques astuces pour ne pas tomber dans le ‘Je prend tout pour tout avoir’)
Support de Cufon :
|  |
Fichiers nécessaires
- la librairie Cufon
- le fichier généré à partir de votre police d’écriture
Concernant ce dernier, lors de la génération de votre fichier de police, il vous faut choisir les caractères que vous voulez y inclure, le piège est de vouloir tout mettre car dans ce cas votre fichier risque d’être énorme. Pour nous européens, il nous faut au minimum les sets de caractères suivant :
- basic latin
- les symboles monétaires
- latin-1 supplement
Si vous ne voulez simplement pas vous embêter à chercher vos polices d’écriture et à créer le fichier nécessaire avec le générateur en ligne du site officiel de Cufon, vous pouvez trouver tout un tas de polices sur le site Cufon Fonts :
- Calibri
- Myriad Pro
- Corbel
- Walkway
Une fois votre police d’écriture choisie, allez sur l’onglet « Cufon kit download », cochez les bons sets d’écriture, vous voilà prêt. (notez également le petit exemple de code en bas de page)
Utilisation de Cufon
Si vous etes arrivés jusque là, vous devriez avoir maintenant la librairie javascript ainsi que le fichier généré à l’aide de votre police d’écriture. Dans un premier temps, essayez de vous faire un petit fichier de ce type pour tester si tout fonctionne bien :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Corbel_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Mon texte en Corbel.</h1>
</body>
</html>Si vous avez un problème lors de la modification de la police sur cette première page, essayez de refaire les étapes les unes apres les autres.
Aller plus loin
Voici une liste non exhaustive de toute sorte d’effet disponible de base avec la librairie Cufon :
Cufon.replace('h2');
ou
Cufon.replace('#top-menu.menu');Dégradé avec en premier paramètre le couleur du haut et en deuxième paramètre la couleur du bas
Cufon.replace('.cufon-gradient', {
color: '-linear-gradient(red, blue)'
});Pour appliquer une ombre à votre texte (que la couleur soit mise en début ou en fin de déclaration ne change rien au rendu) :
Cufon.replace('.cufon-shadow', {
textShadow: '#333 1px 1px'
});Ce code ajoute un effet plus poussé de 3D, une ombre noire en haut et une blanche en bas
Cufon.replace('h2', {
textShadow: '#fff 1px 1px, #333 -1px -1px'
});Les deux codes ci-dessus ensembles :
Cufon.replace('.cufon-gradient-shadow', {
color: '-linear-gradient(blue, yellow)',
textShadow: '#333 1px 1px'
});Pour un lien, on peut ajouter l’effet hover, tout comme en css :
Cufon.replace('a.cufon-gradient-shadow-link', {
color: '-linear-gradient(#FF9900, #000000)',
textShadow: '2px 2px #C0C0C0',
hover: {
textShadow: '2px 2px #C0C0C0',
color: '-linear-gradient(#99CC00, #000000)'
}
});On peut aussi jouer avec la transparence du texte :
Cufon.replace('a.cufon-transparent', {
color: '-linear-gradient(#FFFFFF, #99CCFF)',
textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
hover: {
textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
color: '-linear-gradient(#FFFFFF, #969696)'
}
});A vous de jouer !
10 Comments on “Tout savoir sur Cufon et l’intégration de polices”
Bonjour, j’ai installé Cufon et ca fonctionne à merveille. J’ai un petit soucis par contre, j’ai un menu qui déroule mais qui n’est plus accessible parce que le titre de la page (en Cufon) passe au dessus du menu.
Est-ce qu’il y a un moyen de modifier cette situation?
(lien pour voir: http://www.lnvhv.com/liens)
Bonjour,
Effectivement vous avez un petit problème. Je vous conseil dans un premier temps de mettre un float:left sur votre #mainContent pour éviter que le contenu de démarre sous le menu.
Puis sur votre .menu1, ajoutez position: relative; et z-index: 1;
Bonjour,
Merci beaucoup pour les indications, j’ai ajouter les éléments position et z-index a mon CSS et maintenant tout roule parfaitement.
J’en profite pour poser une autre question, comme vous m’avez bien informé. Les détails de mise en forme du Cufon
Ex.: Cufon.replace(‘h2’);
et les détails
doivent-ils être placés seulement dans le ou on peut le lié avec le CSS, pour pouvoir ajouter des balises plus tard en Cufon (par exemple un sans devoir refaire la mise en forme de toutes les pages.
Même chose si on applique un style:
Cufon.replace(‘.cufon-shadow’, {
textShadow: ‘#333 1px 1px’
});
MErci des indications.
Je vous conseil plutôt d’utiliser des classes ou des ids pour cufon au lieu des balises génériques.
Cufon.replace(‘h2′) deviendrait Cufon.replace(‘.h2-cufon′) par exemple. Donnez les mêmes classes aux éléments qui doivent avoir la même mises en forme Cufon pour éviter de redéfinir à chaque fois les éléments.
C’est une solution purement Javascript. Vous pouvez placer votre code dans un fichier .js externe mais pas un .css.
Merci des informations, ca me donne une certaine piste de recherche car je ne connais suffisamment pas le JavaScript pour coder un fichier externe.
Je vais donc chercher (Google!) à cet effet.
J’imagine que le Cufon.replace(‘.h2-cufon′) fait référence a un document javascript nommé h2-cufon.js ?
Cufon.replace(‘.h2-cufon′);
-> fait référence aux éléments ayant comme classe h2-cufon
Cufon.replace(‘h2′);
-> fait référence aux éléments de type h2, sans distinction de classe ou d’id
Cufon.replace(‘#h2-cufon′);
-> fait référence à l’élément qui a un id h2-cufon
Le plus simple est de mettre votre code avant la balise fermante body comme ceci :
$(document).ready(function(){
Cufon.replace(‘.h2-cufon’);
});
Le problème avec Cufon est que lors du chargement de la page il y a un délai avant que la police apparaisse.
Ce n’est pas très beau, car cela donne l’impression que le texte saute. J’ai dû renoncer à l’utiliser dans certains cas car les clients n’aimaient pas ça.
J’ai mis Cufon.now(); avant la fermeture du body mais ça ne change pas grand chose.
Quelqu’un a t’il une idée ?
Je n’avais pas encore l’opportunité (ou le besoin) de me personnaliser une police d’écriture. Je viens d’essayer cufon, et ton tuto passe très bien, avec de très bonnes explications. Merci ;)
Je cherche un moyen d’utiliser plusieurs police cufon sur la meme page. pouvez vous me donner la faconde faire poru avoir u H1 dans la police A et un autre H1 dans la police B ?
Merci
Bonjour,
Vous trouverez la réponse ici : http://stackoverflow.com/questions/2777825/cufon-multiple-fonts-how