- \n
- Webdesign, Font, Cufon, CSS – S\u2019affranchir des polices syst\u00e8me sur un site web avec cuf\u00f3n<\/a><\/li>\n<\/ul>\n
“Ainsi font, font…” – Quelques polices trouv\u00e9es sur le web<\/h4>\n
Chez Hecube, on est finalement assez sympa, on vous donne \u00e0 la police… des polices ! Voil\u00e0 une liste des polices Cufón que nous avons pu trouver sur le web.<\/p>\n
\r\nDelicious_500.font.js\r\nFutura_Bk_BT_400.font.js\r\nLeagueGothic_400.js\r\nMyriad_Pro_300.font.js\r\nMyriad_Pro_400.font.js\r\nMyriad_Pro_600.font.js\r\nMyriad_Pro_700.font.js\r\nRockwell_Std_300.font.js\r\nVegur_400-Vegur_700.font.js\r\ncoupe-bold_500.font.js\r\ncoupe-medium_500.font.js\r\ncoupe-normal_500.font.js\r\ncoupe-thin_500.font.js\r\ngeorgia_400.font.js\r\njunction_400.font.js\r\n<\/pre>\n
Le fichier zipp\u00e9 du r\u00e9pertoire
cufon-fonts<\/code> des polices ci-dessus (cufon-fonts.zip)<\/a>.<\/p>\nAttention, certaines de ces polices n’ont pas \u00e9t\u00e9 export\u00e9es pour support\u00e9s des lettres avec accent comme le Fran\u00e7ais ou l’Espagnol. Il vous faudra donc refaire l’export si vous souhaitez publier avec accent !<\/strong><\/p>\n
1. Plugin all-in-one-cufon<\/h4>\n
Excellent plugin… extr\u00eamement synth\u00e9tique et parfaitement configurable. Le tout sur une seule page d’o\u00f9 son nom sans doute
all-in-one<\/code>. De loin, notre pr\u00e9f\u00e9r\u00e9.<\/p>\nLe code pour faire des remplacements, du simple \u00e0 plus complexe<\/b><\/p>\n
\r\nCufon.replace('h1');\r\nCufon.replace('h2');\r\nCufon.replace('li.current_page_item', {\r\n \tcolor: '-linear-gradient(#FFFFFF, #99CCFF)',\r\n textShadow: '10px 10px rgba(0, 0, 0, 0.3)',\r\n hover: {\r\n\t\ttextShadow: '10px 10px rgba(0, 0, 0, 0.3)',\r\n\t\tcolor: '-linear-gradient(#FFFFFF, #969696)'\r\n\t}\r\n });\r\n\r\nCufon.replace('li.page_item', {\r\n \tcolor: '-linear-gradient(#FFFFFF, #99CCFF)',\r\n textShadow: '10px 10px rgba(0, 0, 0, 0.3)',\r\n hover: {\r\n\t\ttextShadow: '10px 10px rgba(0, 0, 0, 0.3)',\r\n\t\tcolor: '-linear-gradient(#FFFFFF, #969696)'\r\n\t}\r\n });\r\n\r\n<\/pre>\nSource : http:\/\/wordpress.org\/extend\/plugins\/all-in-one-cufon\/<\/a><\/i><\/p>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_all_in_one_1.jpg\")
<\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_all_in_one_2.jpg\")
<\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_all_in_one_3.jpg\")
<\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_all_in_one_4.jpg\")
<\/p>\n2. Plugin WP-Cuf\u00f3n<\/h4>\n
Le cr\u00e9ateur de ce plugin a juste oubli\u00e9 que la configuration de Cuf\u00f3n 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 \u00e0 part la vegur qui est donn\u00e9 avec le plugin \u00e0 titre d’exemple mais une fois le syst\u00e8me en place, c’est assez facile de changer la police des principaux titres : H1, H2….etc.<\/p>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_wp_cufon_1.jpg\")
<\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_wp_cufon_2.jpg\")
<\/p>\nSource : http:\/\/wordpress.org\/extend\/plugins\/wp-cufon\/<\/a><\/i><\/p>\n
\n1. Upload `wp-cufon` folder to the `\/wp-content\/plugins\/` directory
\n2. Activate the plugin through the ‘Plugins’ menu in WordPress
\n3. Convert or get some compatible .font.js fontfiles
\n4. Create a directory with the name `fonts` in \/wp-content\/plugins\/
\n5. Upload your font-files to `\/wp-content\/plugins\/fonts\/`
\n6. Go to the Settings Page and enter your replacement codes with the “font-family” names of your fonts
\n–> Example: Cufon.replace(‘h1’, { fontFamily: ‘Vegur’ });
\n–> you can test the free Vegur fontfile from \/wp-cufon\/example\/ – load the file into your external font directory.\n<\/p><\/blockquote>\n3. Plugin wp-Typography<\/h4>\n
Ce plugin boxe dans une autre cat\u00e9gorie…. 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 \u00e0 2.8.4.<\/p>\n
Il est aussi recommand\u00e9 d’utiliser le plugin wp-supercache
\nhttp:\/\/wordpress.org\/extend\/plugins\/wp-super-cache\/<\/a><\/p>\nSource : http:\/\/wordpress.org\/extend\/plugins\/wp-typography\/<\/a><\/i><\/p>\n
4. Plugin dynamic-font-replacement-4wp<\/h4>\n
Int\u00e9ressant mais ne permet pas d’ajouter des tags suppl\u00e9mentaires.<\/p>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_4wp_1.jpg\")
<\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/10\/wp_font_typography_4wp_2.jpg\")
<\/p>\nSource : \thttp:\/\/wordpress.org\/extend\/plugins\/dynamic-font-replacement-4wp\/<\/a><\/i><\/p>\n
Convertir des polices localement avec Cufón<\/h2>\n
Une des choses un peu fastidieuses dans Cufón est bien de cr\u00e9er les polices afin de profiter des qualit\u00e9s de la libraire javascript Cufón. Le plus compliqu\u00e9 est bien de de coltiner la conversion des polices, c’est pratiquement un \u00e9quivalent de la guerre des polices.<\/p>\n
La proc\u00e9dure sur Mac, propos\u00e9e par Cufón<\/h4>\n
Si vous rencontrez des difficult\u00e9s \u00e0 convertir vos fichiers de polices en fichier javascript
.font.js<\/code> utilisables dans Cufón, vous n’etes pas vraiment au bout de vos peines…<\/p>\nSur l’espace
Github<\/code> de Cufón, vous avez bien un epoc\u00e9dure sur Mac pour tenter d’obtenir sur Mac et via le terminal, un fichier… Sans grand succ\u00e8s<\/p>\ncat \"MyFontReg\/..namedfork\/rsrc\" > \"MyFontReg.dfont\"<\/code><\/p>\nCe qui fait sur un poste Mac, une commande de ce type :<\/b><\/p>\n
cat \/Users\/username\/Library\/Fonts\/nom_de_ma_police > \/Users\/username\/Documents\/Fonts_for_cufon\/nom_de_ma_police.dfont
\n<\/code><\/p>\nSource : http:\/\/github.com\/sorccu\/cufon\/wiki\/trouble-with-font-files<\/a><\/i><\/p>\n
La commande pour connaitre la liste des polices install\u00e9s sur votre Mac
\ncd \/username\/Library\/Fonts\/<\/code><\/p>\n<\/h4>\n
Installer une version en local sur MAMP de la librairie Cufón<\/h4>\n
Cela suppose que vous connaissez au moins l’article pour utiliser
MacPorts<\/code><\/p>\n- \n
- MacPorts – la puissance de l\u2019open-source sur votre Mac Os X<\/a><\/li>\n<\/ul>\n
sudo port install fontforge<\/code><\/p>\nOn fait ensuite un t\u00e9l\u00e9chargement et une installation de la librairie
sorccu-cufon-1.09-0-g1c9b69b.zip<\/code> dans un r\u00e9pertoire en localcufon_forge<\/code><\/p>\nSource : http:\/\/github.com\/sorccu\/cufon<\/a><\/i><\/p>\n
Il faut ensuite \u00e9diter le fichier
\/generate\/settings.ini<\/code> et placer la ligne suivante en d\u00e9sactivant le chemin par d\u00e9faut :<\/p>\n\r\n#fontforge=\/usr\/bin\/fontforge\r\nfontforge=\/opt\/local\/bin\/fontforge\r\n<\/pre>\n
Il ne vous reste qu’\u00e0 d\u00e9marrer votre serveur en local (MAMP) et de convertir les polices souhait\u00e9es via la proc\u00e9dure normale mais en local.<\/p>\n
En savoir plus<\/h2>\n
- \n
- Un plugin qui utilise les polices mis \u00e0 disposition par Google, encore eux !
\n\thttp:\/\/wordpress.org\/extend\/plugins\/wp-google-fonts\/<\/a><\/li>\n- Un plugin en version d’essai puis qui devient payant….
\n\thttp:\/\/wordpress.org\/extend\/plugins\/anyfont\/<\/a><\/li>\n- 20 Best WordPress Typography Plugins To Enhance Readability
\n\thttp:\/\/wordpress.org\/extend\/plugins\/facelift-image-replacement\/<\/a><\/li>\n- 20 Best WordPress Typography Plugins To Enhance Readability
\n\thttp:\/\/www.hongkiat.com\/blog\/20-best-wordpress-typography-plugins-to-enhance-readability\/<\/a><\/li>\n- Getting a local version of Cuf\u00f3n running on a mac
\n\thttp:\/\/www.lazydada.com\/2010-08-03\/getting-a-local-version-of-cufon-running-on-a-mac\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Qui n’a pas envie de s’affranchir du faible nombre de polices syst\u00e8me dont on dispose au sein d’une CSS. On avait d\u00e9j\u00e0 en partie r\u00e9pondu… <\/p>\n
- Un plugin en version d’essai puis qui devient payant….
- Un plugin qui utilise les polices mis \u00e0 disposition par Google, encore eux !
- MacPorts – la puissance de l\u2019open-source sur votre Mac Os X<\/a><\/li>\n<\/ul>\n