Intégrer Cufon pour afficher des polices de caractères originales
publié le 06/07/2023
Envie de donner un peu de style à votre blog WordPress. Pas de souci, la librairie javascript Cufon est là pour vous aider à afficher toute sorte de polices de caractère.
Cufon est une alternative très utilisée par les Web designers pour afficher des fonts originales sur un site internet.
Télécharger Cufon en 5 étapes
- Rendez-vous sur le site de Cufon pour télécharger le script en cliquant sur le bouton download du menu.
- Générer la police que vous souhaitez utiliser en uploadant celle-ci dans le générateur de police.
- Cocher la case « EULAs ».
- Pour inclure les caractères accentués en français, sélectionner Latin 1 et Latin-1 Supplement.
- Accepter les termes d’utilisation et cliquer sur « Let’s do this! » pour générer votre police en javascript.
Intégrer Cufon dans WordPress
Uploadez Cufon via ftp et votre police dans le dossier « js » de votre thème sur le serveur de votre blog. Modifiez le fichier « header.php » et entrer le code suivant entre les balises <head> et </head> pour utiliser Cufon :
<script src= »<?php bloginfo(‘template_url’); ?>/js/cufon-yui.js » type= »text/javascript »></script> // adresse du script Cufon
<script src= »<?php bloginfo(‘template_url’); ?>/js/VOTRE_POLICE.font.js » type= »text/javascript »></script> // adresse de la police Cufon
<script type= »text/javascript »>
Cufon.replace(‘h3’); // Permet de remplacer la police de la balise h3 par notre police Cufon
</script>
Cas particulier d’Internet explorer
Le temps d’affichage dans IE peut se révéler assez long, voici la solution. Insérez le code suivant juste avant la balise fermante </boby> de la page index.php :
<script type= »text/javascript »> Cufon.now(); </script>
L’astuce en plus
Pour utiliser plusieurs polices, il suffit d’ajouter une ligne supplémentaire avec l’adresse de vos polices générée avec Cufon.
Et en utilisant les Cufon.replace on assigne la police désirée à la balise voulue.
Exemple :
<script src= »<?php bloginfo(‘template_url’); ?>/js/cufon-yui.js » type= »text/javascript »></script>
<script src= » »<?php bloginfo(‘template_url’); ?>/js/VOTRE_POLICE1.font.js » type= »text/javascript »></script>
<script src= »<?php bloginfo(‘template_url’); ?>/js/VOTRE_POLICE2.font.js » type= »text/javascript »></script>
<script type= »text/javascript »>
Cufon.replace(‘h1’, { fontFamily: ‘VOTRE_POLICE1’ });
Cufon.replace(‘h2’, { fontFamily: ‘VOTRE_POLICE2’ });
</script>
Pour utiliser Cufon, rendez-vous à cette adresse.
Il n'y a pas de commentaires pour le moment. Soyez le premier à participer !