WordPress, Polices, Cufón, Plugin – Plugin pour utiliser Cufón dans votre thème WordPress



Qui n’a pas envie de s’affranchir du faible nombre de polices système dont on dispose au sein d’une CSS. On avait déjà en partie répondu à cette question dans un précèdent article de ce blog notamment sur la toute nouvelle librairie Cufón, venu de Finlande si mes souvenirs sont bons. Après quelques mois d’existence, cette librairie qui permet le « font replacement » (remplacement de la police) au sein d’un site web tout en préservant la capacité de référencement de votre site web a été portée par de nombreux développeurs au sein de Worpress via des plugins. Voici donc rapidement notre sélection de plugins.

Le précèdent article sur une question de Cufón

« Ainsi font, font… » – Quelques polices trouvées sur le web

Chez Hecube, on est finalement assez sympa, on vous donne à la police… des polices ! Voilà une liste des polices Cufón que nous avons pu trouver sur le web.

Delicious_500.font.js
Futura_Bk_BT_400.font.js
LeagueGothic_400.js
Myriad_Pro_300.font.js
Myriad_Pro_400.font.js
Myriad_Pro_600.font.js
Myriad_Pro_700.font.js
Rockwell_Std_300.font.js
Vegur_400-Vegur_700.font.js
coupe-bold_500.font.js
coupe-medium_500.font.js
coupe-normal_500.font.js
coupe-thin_500.font.js
georgia_400.font.js
junction_400.font.js

Le fichier zippé du répertoire cufon-fonts des polices ci-dessus (cufon-fonts.zip).

Attention, certaines de ces polices n’ont pas été exportées pour supportés des lettres avec accent comme le Français ou l’Espagnol. Il vous faudra donc refaire l’export si vous souhaitez publier avec accent !

1. Plugin all-in-one-cufon

Excellent plugin… extrêmement synthétique et parfaitement configurable. Le tout sur une seule page d’où son nom sans doute all-in-one. De loin, notre préféré.

Le code pour faire des remplacements, du simple à plus complexe

Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('li.current_page_item', {
                	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)'
	}
                    });
 
Cufon.replace('li.page_item', {
                	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)'
	}
                    });

Source : http://wordpress.org/extend/plugins/all-in-one-cufon/

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

2. Plugin WP-Cufón

Le créateur de ce plugin a juste oublié que la configuration de Cufón n’est pas l’onglet « Settings » mais dans l’onglet « Appearance » au sein de l’outil d’administration. Il est ensuite assez difficile de trouver des fonts à part la vegur qui est donné avec le plugin à titre d’exemple mais une fois le système en place, c’est assez facile de changer la police des principaux titres : H1, H2….etc.

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Source : http://wordpress.org/extend/plugins/wp-cufon/

1. Upload `wp-cufon` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Convert or get some compatible .font.js fontfiles
4. Create a directory with the name `fonts` in /wp-content/plugins/
5. Upload your font-files to `/wp-content/plugins/fonts/`
6. Go to the Settings Page and enter your replacement codes with the « font-family » names of your fonts
–> Example: Cufon.replace(‘h1’, { fontFamily: ‘Vegur’ });
–> you can test the free Vegur fontfile from /wp-cufon/example/ – load the file into your external font directory.

3. Plugin wp-Typography

Ce plugin boxe dans une autre catégorie…. mais il ne marche sur la version Version 3.0.1 semble-t-il ! C’est ballot. Ce plugin ne semble marcher qu’avec une version de 2.7 à 2.8.4.

Il est aussi recommandé d’utiliser le plugin wp-supercache
http://wordpress.org/extend/plugins/wp-super-cache/

Source : http://wordpress.org/extend/plugins/wp-typography/

4. Plugin dynamic-font-replacement-4wp

Intéressant mais ne permet pas d’ajouter des tags supplémentaires.

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Wordpress, Polices, Cufón, Plugin - Plugin pour utilser Cufón dans votre thème WordPress

Source : http://wordpress.org/extend/plugins/dynamic-font-replacement-4wp/

Convertir des polices localement avec Cufón

Une des choses un peu fastidieuses dans Cufón est bien de créer les polices afin de profiter des qualités de la libraire javascript Cufón. Le plus compliqué est bien de de coltiner la conversion des polices, c’est pratiquement un équivalent de la guerre des polices.

La procédure sur Mac, proposée par Cufón

Si vous rencontrez des difficultés à convertir vos fichiers de polices en fichier javascript .font.js utilisables dans Cufón, vous n’etes pas vraiment au bout de vos peines…

Sur l’espace Github de Cufón, vous avez bien un epocédure sur Mac pour tenter d’obtenir sur Mac et via le terminal, un fichier… Sans grand succès

cat "MyFontReg/..namedfork/rsrc" > "MyFontReg.dfont"

Ce qui fait sur un poste Mac, une commande de ce type :

cat /Users/username/Library/Fonts/nom_de_ma_police > /Users/username/Documents/Fonts_for_cufon/nom_de_ma_police.dfont

Source : http://github.com/sorccu/cufon/wiki/trouble-with-font-files

La commande pour connaitre la liste des polices installés sur votre Mac
cd /username/Library/Fonts/

Installer une version en local sur MAMP de la librairie Cufón

Cela suppose que vous connaissez au moins l’article pour utiliser MacPorts

sudo port install fontforge

On fait ensuite un téléchargement et une installation de la librairie sorccu-cufon-1.09-0-g1c9b69b.zip dans un répertoire en local cufon_forge

Source : http://github.com/sorccu/cufon

Il faut ensuite éditer le fichier /generate/settings.ini et placer la ligne suivante en désactivant le chemin par défaut :

#fontforge=/usr/bin/fontforge
fontforge=/opt/local/bin/fontforge

Il ne vous reste qu’à démarrer votre serveur en local (MAMP) et de convertir les polices souhaitées via la procédure normale mais en local.

En savoir plus