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/
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.
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.
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
- Un plugin qui utilise les polices mis à disposition par Google, encore eux !
http://wordpress.org/extend/plugins/wp-google-fonts/ - Un plugin en version d’essai puis qui devient payant….
http://wordpress.org/extend/plugins/anyfont/ - 20 Best WordPress Typography Plugins To Enhance Readability
http://wordpress.org/extend/plugins/facelift-image-replacement/ - 20 Best WordPress Typography Plugins To Enhance Readability
http://www.hongkiat.com/blog/20-best-wordpress-typography-plugins-to-enhance-readability/ - Getting a local version of Cufón running on a mac
http://www.lazydada.com/2010-08-03/getting-a-local-version-of-cufon-running-on-a-mac/
