Les polices Cufon dans les thèmes WordPress

Les polices Cufon permettent de multiplier les effets graphiques sur les polices de caractères, et sont devenues assez populaires dans les thèmes WordPress.

Oui mais voilà, très souvent, elles n’affichent pas les caractères accentués. Comment faire ?

Pourquoi les polices Cufon n’affichent-elles pas les caractères ?

Une police Cufon c’est quoi ? C’est un fichier .js qui contient la « description » en code de la police à afficher, en remplacement d’une police normale. 

La plupart des thèmes sont développés par des américains, qui n’ont donc pas besoin de caractères accentués. Or il faut savoir que les fichiers « cufon » (des fichiers .js) seraient très lourds si ils incluaient tous les caractères possibles. Le concepteur du thème va donc inclure ce dont il a besoin (généralement ce qu’on appelle « Latin Basic » qui comprend les lettres non accentuées, en majuscules et minuscules, les chiffres et les signes de ponctuation les plus courant.

Or nos caractères accentués en français sont compris dans un ensemble plus large, qui s’appelle « Latin 1 ».

Il est normal que les créateurs de thèmes n’incluent pas l’ensemble des caractères possibles. Chaque utilisateur n’aurait pas besoin de tout (le birman, le chinois, l’arabe…) et se retrouverait avec des fichiers de taille monstrueuse qui dégraderaient fortement la performance du site.

On a bien sûr la possibilité de se passer du Cufon, et de repartir sur une police de caractères plus standard, mais c’est dommage.

Re-générer son fichier Cufon

Il existe un site qui permet en ligne de générer son propre fichier cufon, en choisissant les caractères à intégrer (on peut même y choisir des caractères spécifiques, individuellement), c’est cufon.shoqolate.com.

A partir de cela, c’est très simple, il vous suffit :

  1. d’identifier la police de caractères de base utilisée pour le remplacement
  2. de retrouver le fichier de la police (sous format tff, otf, postcript)
  3. de le passer au générateur en vérifiant les différentes options par rapport à votre fichier cufon dans votre thème
  4. d’enregistrer le nouveau fichier en remplacement de l’ancien (après avoir fait une sauvegarde bien sûr).

Identifier la police de caractère de base

L’information ne se trouve pas dans le fichier style.css, mais dans les fichiers cufon. Selon la façon dont votre thème est organisé ils seront classés à un endroit ou un autre, mais ce sont des fichiers js, et vous aurez :

  • un fichier cufon.js qui permet de faire le remplacement
  • un fichier effects.js qui indique quels sont les remplacements à faire
  • des fichiers qui porteront des noms de polices de caractères, par exemple Myriad.font.js

Ce sont ces derniers qui vont vous indiquer la police de caractère de base, en les ouvrant avec un éditeur de texte vous trouverez en haut une description de la police.

Au cas où le nom ne serait pas exact, vous pouvez, à partir d’une copie d’écran de la police, la charger sur un site qui permet d’identifier visuellement des polices, comme WhatFontthis, qui va vous soumettre des propositions de polices visuellement approchantes.

Retrouver le fichier de la police

Là c’est simple, Google is our friend, « download + nom de la police ». Là vous pouvez vérifier que la police de base dispose bien de caractères accentués. Si ce n’est pas le cas… il faut abandonner, ou en choisir une similaire.

Faites attention à bien prendre un fichier dans un des formats supportés par le générateur !

Re-générer son fichier

Le site tient sur une page, et celle-ci est très claire. On peut créer un font en combinant plusieurs fichiers d’origine (normal, gras, italique….). Je recommande de choisir Latin-Base, supplément Latin-1 et les caractères spécifiques WordPress. Pour le reste, il suffit de prendre les options standard.

Passer à font-face

Si vous avez un peu de courage, car il faut alors modifier les css, le passage à font-face, qui est une solution plus pérenne, est une bonne idée. Vous trouvez ici tous les détails sur comment l’effectuer. La solution font-face a en outre l’avantage d’être plus lisible pour le développeur que cufon, puisque les polices de caractères apparaissent directement dans le css.

Et de la même façon, il existe un générateur pour transformer un fichier .TFF ou assimilé en fichier font-face : Font Squirrel.

4 commentaires

  1. C’est exactement ce que je cherchais !

    J’ai acheté un thème récemment qui part en cacahuètes quand on tente les accents.

    Dès que j’ai un peu de temps je teste ta (tes?) solutions.

    Une page de plus dans mon « read me later » ;)

    Répondre à Phil
  2. Vraiment merci pour ce tuto,je galère depuis un moment pour trouver d’ou ca vient !
    Pb résolu
    Merci !

    Répondre à Pierre
  3. CuFont c’est le même système utilisé par google font ? J’ai utilisé google font pour un de mes sites et le texte s’affiche superbement bien sur Firefox, mais alors sur Internet Explorer c’est la cata, j’ai une police Arial horrible :( Je cherche une solution pour afficher une sorte de logo en font, afin que ce ne soit pas une image.
    Merci.

    Répondre à Pierre
  4. Un grand Merci !! Tuto parfait et rapide à mettre en place.

    Répondre à Kungs

Commenter

*Informations requises Merci de donner les informations requises

  • Pas de liens raccourcis
  • L'auteur doit s'identifier avec son pseudo, son nom, son prénom ou s'il le veut le nom de son entreprise ou de son site, sauf si celui-ci correspond à des mots clés. Toutes les combinaisons sont permises dans ce cadre.
  • L'url peut être celle d'un site ou profil de réseau social, uniquement la page d'accueil
  • Pas d'adresse email jetable

*

*