juin 7

Gestion des polices exotiques avec CSS3, jQuery et Cufon

Cette semaine nous aborderons le problème de la gestion des polices exotiques (comprendre les polices non-standard) suivant les différents navigateurs. La solution proposée ci-dessous n’est pas forcément la meilleure sur la question du « poids de la page » mais c’est celle qui d’après mes essais couvre le plus de navigateurs et cause le moins de problèmes.

Qu’est-ce qu’une police exotique ?

Une police exotique est tout simplement une police non-standard. D’accord, vous n’êtes pas plus avancé alors qu’est-ce qu’une police standard ? C’est tout simplement une police présente sur tous les systèmes d’exploitation et prise en charge par tous les navigateurs. La police Arial est une police standard, à contrario la police Helvetica n’est pas une police standard quant à la police Helvetica Neue, ne cherchez pas à la trouver sur un système d’exploitation autre que Mac OS.

En partant de ce principe, le webdesigner et l’intégrateur doivent donc trouver comment faire avec les polices standards et les polices exotiques dans le but d’atteindre le Saint-Graal, un affichage identique sur tous les navigateurs.

Les différentes solutions

Les différentes solutions sont donc relativement simple. Tout d’abord du coté du webdesigner, il faudra faire au maximum avec les polices standards en ne gardant les polices exotiques que pour les éléments « statiques » de votre maquette : logo et navigation par exemple. Seulement cette limite peut être forte pour ceux qui souhaiteraient avoir le titre d’un article affiché avec une police exotique.

Du coté de l’intégrateur maintenant, il faudra faire avec la maquette du webdesigner. Tous les éléments statiques pourront être transformés en images et gérés via les sous propriétés de la balise a : a:link, a:visited, a:hover, a:active, – mémotechnique : LoVe HAte.

Seulement voila, que faire de nos titres utilisant une police exotique et pourtant dynamique ? La aussi plusieurs solutions existent, le remplacement du texte par une image générée via une libraire de type GD ou encore ImageMagick, l’utilisation de propriétés CSS ou encore le recours à Flash et/ou Javascript. Le tout étant de trouver le moyen convenant au maximum de monde.

Écartons directement l’utilisation de GD/ImageMagick, cela implique un peu de travail coté développement et l’intégrateur n’est pas forcément développeur. Au niveau de CSS, @font-face est une solution proposée du coté de CSS3. Enfin, du coté de flash et de JS, beaucoup d’entre-vous connaissent la solution sIFR mais beaucoup d’entre-vous savent aussi que sIFR à quelques problèmes relavant par moment du mysticisme.

Ma solution : CSS3, jQuery et Cufon

Passons maintenant à ma solution, elle utilise CSS3 via @font-face, jQuery pour la détection de la présence des polices et Cufon pour le remplacement. Le but, rendre la chose compatible avec le maximum de navigateurs. Pour les détracteurs, oui, si jamais une personne arrive avec Internet Explorer 6 et le javascript désactivé, cela ne fonctionnera pas.

Première étape : @font-face et CSS3

La première étape de la solution consiste en l’utilisation de @font-face. @font-face est une propriété CSS3, cette première étape ne s’appliquera donc qu’au navigateur supportant cette propriété CSS3.

Pour information @font-face est en fait une propriété CSS 2 complètement délaissé à l’époque de CSS 2.1 puis réintroduite via CSS3.

Nous allons donc prendre notre fichier de police, l’envoyer dans un dossier précis (soyons fou, il se nommera /font/) puis l’inclure dans notre feuille de style de la façon suivante.

@font-face { font-family : 'Ma police exotique';
src: url('font/mapoliceexotique.ttf') format('truetype'); }

Seconde étape, appeler notre police de la façon la plus basique qui soit via la propriété CSS font-family. Nous l’appellerons pour nos titres h3 dans le div avec l’identifiant article.

#article h3 { font-family: "Ma police exotique", arial, sans-serif; }

Seconde étape : cufon

Passons maintenant aux autres navigateurs, nous utiliserons cufon car après beaucoup d’essais en condition de production, cufon est la meilleure alternative à sIFR.

Le fonctionnement de cufon : cufon est composé de deux fichiers, le premier est un fichier yui (interface) chargé de traiter le fichier de police en javascript créé via une interface web. cufon s’implémente via VME sur les vieux navigateurs et via canvas sur les navigateurs plus récents.

Tout d’abord, télécharger le fichier YUI de cufon puis se rendre sur le site internet de cufon afin de générer un fichier javascript de police. Une fois cela fait, envoyer le tout sur votre serveur dans le repertoire de votre choix (disons /js/).

<script src="js/cufon-yui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mapoliceexotique.font.js" type="text/javascript" charset="utf-8"></script>

Troisième étape : jQuery

Une fois l’étape 3 terminée, nous pourrions très simplement nous arrêter la mais cela serait un peu bête car l’étape 1 n’aurait donc aucun sens. Nous allons donc très simplement utiliser ~~notre~~ ma librairie javascript favorite à savoir jQuery ainsi qu’un plugin pour tester la présence du fichier de police sur l’ordinateur du visiteur.

Pour cela télécharger jQuery (si vous ne l’utiliser pas déjà pour tous vos effets javascript) puis le plugin fontavailable. Enfin, envoyer le tout dans votre repertoire /js/ puis inclure le tout.

<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fontavailable-1.1.min.js" type="text/javascript" charset="utf-8"></script>

Passons maintenant au bout de code javascript à intégrer pour utiliser le tout.

	<script type="text/javascript">
	$(document).ready(function() {
	    if(!$.fontAvailable('Ma police exotique')) {
	      Cufon.replace('#article h3');
	    }
	});
	</script>

Conclusion

Passons maintenant au cheminement complet de cette technique :

Le visiteur arrive sur votre site, le dom se charge, la feuille de style css est appelé et essaie d’appliquer votre police exotique
Votre visiteur n’a pas la police exotique
1. Il est sur un navigateur supportant @font-face, la police se télécharge.
2. Il n’est pas sur un navigateur supportant @font-face, le document se charge, fontavailable teste la présence de la police et l’intègre
Votre visiteur a votre police exotique
1. Rien ne se passe

Au final et pour revenir à mon introduction, certains d’entre-vous pourrons s’étonner de l’armada déployée pour l’occasion (qui n’est d’ailleurs pas plus importante que celle utilisée pour une intégration correcte de sIFR) mais le modèle peut être optimisé via fontavailable en ne limitant plus le test au changement de la police mais aussi au téléchargement de cufon-yui.js et votre fichier *.font.js.

By Alexandre

Comments

Samy juin 7th

Cufon c’est pas un peu lourd pour juste afficher une police exotique ?
Alexandre juin 7th

Si tu veux parler du poids au niveau ko, effectivement cufon est effectivement plus lourd que sIFR.

Si tu veux parler du fait d’appeler une librairie xyz pour afficher des typo exotiques, c’est une des solutions et en tout cas, la solution qui pose le moins de problème sur le long terme.
Neewok juin 22nd

C’est plutôt une bonne initiative de parler de @font-face et de rendre cette technique accessible en français mais ce serait bien plus cool de ta part de créditer l’auteur original : http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/
Alexandre juin 22nd

A ma décharge le fait que je m’étais arrêté à la page google du projet et les trois lignes de l’exemple sans aller plus loin (le ! étant un test tout ce qu’il y a de plus banal).
Neewok juin 23rd

Autant (d’aucuns disent « au temps », vaste débat) pour moi, je te crois. Excuse ma remarque.
Laurent août 30th

Bonjour,

merci pour votre article, je viens de l’intégrer dans un site, marche nickel

je rencontre un problème lorsque j’ai des accents.

auriez vous une solution ?

Cordialement

Laurent
benoit octobre 28th

Si quelqu’un a une solution poru ces problèmes de caractères accentués, je suis également preneur.
Alexandre octobre 28th

Hello benoit

Pour corriger ce problème, il faut choisir une typo qui comporte les caractères accentués dans le fichier SWF.
Samy Rabih octobre 28th

Une méthode qui marche même sous IE 6 :

@font-face { font-family: NomdeLaPolice; src: url(../../../../fonts/police.eot); /* IE / src: local(« NomdeLaPolice »), url(../../../../fonts/police.ttf) format(« truetype »); / non-IE */ }

A mettre dans vos CSS (le fichier .eot s’obtient très facilement depuis le .ttf via l’utilitaire ttf2eot)

Ca évite le chargement d’une bibliothèque extérieure juste pour ça.
severine novembre 13th
Bonjour au risque de passer pour une idiote… ca ne marche pas du tout sur firefox… ni IE chez moi : je crois avoir bien suivi les instructions, voici le code de ma page test :

Polices
```
$(document).ready(function() {
    if(!$.fontAvailable('Ma police exotique')) {
      Cufon.replace('#article h3');
    }
});
```
test

Qu’est-ce que je mets au mauvais endroit ?? a priori j’ai placé les fichiers correpondants là ou il fallait mais ca ne marche pas… ma police est dans img et voici le code de la page css :

@font-face { font-family : ‘Ma police exotique’; src: url(‘img/littleD.ttf’) format(‘truetype’); }

article h3 { font-family: « Ma police exotique », arial, sans-serif; }

bonne journée et merci…
Alexandre novembre 13th

Bonjour Séverine,

Je ne sais pas si tu m’as copier/coller directement le code que tu as appliqué mais si c’est le cas, il faut remplacer les « Ma police exotique » par le nom de ta police (littleD)

Après si ce n’est vraiment pas le cas, tu peux toujours regarder avec firebug (ou l’outil de dev de safari) si le fichier se charge correctement et plus largement ce qu’il se passe sur ta page
severine novembre 14th
Bonjour Alexandre, merci pour ta réponse mais ca ne marche tjrs pas. je pense que je ne sais pas appeler le #article h3 dans le div…

voici le code de la css : @font-face { font-family : ‘littleD’; src: url(‘img/littleD.ttf’) format(‘truetype’); }

article h3 { font-family: « littleD », arial, sans-serif;

Et le code de la page test.htm :

Polices
```
$(document).ready(function() {
    if(!$.fontAvailable('littleD')) {
      Cufon.replace('article');
    }
});
```
test

dois-je mettre un « style » à la place du « class » ? en tout cas RIEN ne se passe…

merci
severine novembre 14th
oups pardon pour cette partie.. j’avais fait des tests mais j’ai rectifié et ca ne change rien
```
Cufon.replace('#article h3');
```
Fili janvier 12th

@laurent et @benoit dans le générateur du site cufon, il suffit de cliquer la case « Latin-1 Supplement » pour obtenir les accents!!!
Fili janvier 12th
Bonsoir Alexandre, Merci pour ton tuto. J’avais découvert la version anglaise d’un certain kilian, mais ta version propose qq petites différences.

Néanmoins, en utilisant les 2 méthodes, j’ai tjs le même problème qui commence sérieusement à m’agacer. Peut-être pourra tu m’aiguiller.

J’ai télécharger sur le site fontsquirrel.com la typo Quicksand. Le téléchargement compile automatiquement les fonts aux formats ttf et oet, ainsi qu’un fichier css avec les font-face. Le problème est le suivant : Le font-family est « QuicksandLight » et mon src local « Quicksand Light ». Dans le javascriptscript cufon, j’ai indiqué
```
 $(document).ready(function() {
      if(!$.fontAvailable('QuicksandLight')) {
        Cufon.replace('h1', { hover: true});
      }
  });
```
J’ai essayé le même script avec « Quicksand Light » et « Quicksand », mais malheureusement, mon script cufon ne marche pas. FF 3.5 affiche bien la typo en css, mais d’autres navigateurs (chrome) n’affichent pas la typo cufon sous forme d’images

Est-ce que tu as une idée d’où provient le problème.

Merci
Fili janvier 14th

Mon problème est réglé. C’était ma version de jquery qui posait problème. dés pour mon post.
aiphes février 24th

Très bonne solution avec toutefois des remarques et des questions : - comment faire pour appliquer la même police à des balises différentes ?(2 sortes de div par exemple) - il apparait que cufon remplace la police sur TOUS les navigateurs, mêmes ceux qui comprennent css3…du coup la css ne sert à rien…à moins que j’ai raté quelquechose…à noté que j’utilise cufon sur drupal via un module dédié…
anna août 3rd

Bonjour ! Je vous remercie pour votre article, qui m’intéresse beaucoup. J’ai testé cufon, pour l’instant sans mettre en place @font-face ni font available. En effet, j’ai suivi plusieurs tutos avant de tomber sur votre article (comme celui-ci http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/ ), et j’ai vu sur de nombreux articles que cette technique ne permet pas à l’utilisateur de sélectionner le texte transformé par cufon. Pourtant j’ai vu que sur d’autres sites l’on pouvait sélectionner le texte (exemple : http://www.monblogdefille.com/blog/ ), mais comment cela se fait, je n’arrive pas à le déterminer. Sauriez-vous m’aiguiller à ce sujet ?
Samy août 6th

Anna : tu parles de la police utilisée à droite sur Monblogdefille pour écrire l’adresse email? Il s’agit de la technique font-face, même si la personne a utilisé une classe CSS nommée « cufon »