Comparer et installer polices de caractères exotiques en HTML (JavaScript + CSS)

La question des polices de caractère dans les pages web a longtemps été l’objet d’un débat enflammé et parfois difficile entre les webdesigners et leurs clients. Il est en effet souvent difficile de faire comprendre à quelqu’un qui n’est pas au fait des contraintes du web qu’on ne peut pas utiliser n’importe-quelle police, et qu’il

La question des polices de caractère dans les pages web a longtemps été l’objet d’un débat enflammé et parfois difficile entre les webdesigners et leurs clients.

Il est en effet souvent difficile de faire comprendre à quelqu’un qui n’est pas au fait des contraintes du web qu’on ne peut pas utiliser n’importe-quelle police, et qu’il faut respecter une convention liée au fait que les pages web affichent les textes en allant chercher dans les polices disponibles sur l’ordinateur de l’internaute.

Du coup le choix est quelque peu limité, et le web affiche donc les textes dans une petite poignée de polices dont on sait qu’elles sont à peu près disponibles sur tous les ordinateurs, à savoir Arial, Verdana, Helvetica et autres Georgia. Ou Comic sans MS si vous y tenez vraiment.

Il existe des méthodes pour travailler un peu les typos et faire par exemple ressortir les titres. La plus simple est d’utiliser une image, avec les inconvénients que cela suppose : lourdeur de mise en oeuvre, impossibilité de gérer du exte dynamiquement, handicap pour le référencement, etc… L’autre méthode consiste à utiliser un script comme siFR qui transforme le texte en « image » au format Flash. Le rendu graphique est très flatteur, mais il y a là encore quelques inconvénients, et notamment ceux liés à l’utilisation de Flash.

Sinon il y a la méthode JavaScript + CSS, plus « universelle » puisque normalement compatible avec tous les navigateurs. C’est celle qu’a utilisée Viktor Miranda, un développeur suédois pour mettre en place Font Comparer, un outil qui permet d’afficher à la volée et simultanément un texte dans plusieurs polices de caractère en HTML, mais également de choisir et d’installer celle(s) que l’on veut sur son site en étant sûr qu’elle s’afficheront de la même façon chez tous vos visiteurs, quelles que soient celles installées sur leur machine. Quelques options sont disponibles, comme la couleur, la taille, la couleur de fond et l’effet d’ombre.

En fait le service utilise une API de Google (Google Fonts) pour générer le JavaScript et le CSS correspondant à la police de caractère choisie. C’est aussi l’inconvénient du système : le morceau de code JavaScript que vous installez dans votre header fait appel à un script externe, ce qui ne vous met pas à l’abri d’un changement en cas de fermeture de celui-ci.

Cela étant, avec Google le risque est quand même relativement limité.


Nos dernières vidéos

26 commentaires

  1. Benoit Chleide on

    Dans le même ordre d’idée, il existe aussi « cufón » qui vous permet d’utiliser n’importe quelle police (pour laquelle vous disposez des droits d’utilisation) sur votre site. Ce système utilise du JavaScript et ne fait cette fois pas appel à un script externe. L’utilisation en est d’ailleurs très simplifiée grâce à la mise à disposition d’un générateur : http://cufon.shoqolate.com

  2. « (…) ce qui ne vous met pas à l’abri d’un changement en cas de fermeture de celui-ci. Cela étant, avec Google le risque est quand même relativement limité ».

    Merci pour ce sourire matinal. J’utiliserai donc dorénavant aussi le « relativement limité » pour des événements dont la probabilité d’apparition est inférieure à 10^-50. Par exemple : « Ségolène Royal sera présidente de la république française en 2012 est un risque relativement limité ».

    Sinon, oui, ça a l’air sympa. (Même si la Suède est en train de devenir un pays de cauchemar : viols, pb d’intégration, …)

  3. Les Web Font sont maintenant supportées par les navigateurs courants (mis à part Opera Mini).
    Pourquoi utiliser des bidouillages quand on a une technologie prévue pour le faire ?

  4. Insérer une police particulière est une problématique que nous rencontrions souvent dans l’agence web où je travaille. Jusqu’à il y a peu, nous utilisions le cufon suggéré par Benoît ci-dessus mais ce javascript rend la page web très lourde en poids puisque les textes sont convertis en .png.

    Un ami s’est longtemps penché sur la question et propose THE solution pour utiliser toutes les fonts que vous souhaitez très proprement et compatible avec tous les navigateurs (ce qui n’est pas le cas de cufon) : http://www.eboyer.com/dev/653-.....vigateurs/

  5. Cufon fait plus l’unanimité à ce jour car il a le mérite de ne pas sortir du flash : je l’ai adopté pour de nombreux projets et l’intégration est très aisé !

  6. Techniquement, cufon est un bien bel outil qui peut s’utiliser avec toutes les polices. En revanche, les conditions d’usages des polices n’incluent que très rarement le droit de les utiliser sur le web (avec cufon ou @font-face), donc ça reste un outil utilisable assez moyennement. Le support de @font-face en css est aujourd’hui relativement étendu, ce qui limite encore un peu plus l’usage de cufon. D’ailleurs, récemment, sur la page officielle de cufon, son auteur nous invite à utiliser @font-face avec typekit…

    http://typekit.com/ (payant) offre une large bibliothèque de polices (y compris venant de fonderies très connues) avec l’assurance qu’elles ont la licence pour être utilisées sur le web.

    http://www.fontsquirrel.com/ offre un grand nombre de fontes utilisable avec @font-face, la plupart des typos sont gratuites. En outre, le site propose un outil pour convertir une police dans tous les formats utilisables sur le web et générer les styles correspondants.

    http://www.fontspring.com/ offre également un grand nombre de polices (parfois payantes) avec une licence web.

    et puis google fonts, fontdeck, …

    Cet article est le plus complet que je connaisse sur le sujet : http://www.borisforconi.net/bl.....le-web/918

  7. @Eric « La plus simple est d’utiliser une image, avec les inconvénients que cela suppose : lourdeur de mise en oeuvre, impossibilité de gérer du exte dynamiquement » n’importe nawak, la fonction imagettftext() ne permet pas de dessiner un texte avec n’importe quelle police TrueType sur une image dynamiquement ?

    • Eric

      @AM : je ne connaissais pas cette fonction, désolé. Je vais me renseigner. Cela étant ton « n’importe nawak » était-il réellement indispensable ? Tu as de la chance, habituellement je supprime les commentaires qui commencent ainsi. On peut argumenter sans être inutilement arrogant ou agressif, merci.

  8. @Guillaume Tirard +1 c’est vrai que maintenant @font-face à était ajouté css3 et fonctionne sur tous les navigateurs.

    @Eric ce n’était pas méchant. Juste étonnant que tu ne connaisse pas, car utilisée pour les captchas.

  9. Il y a aussi un techno CSS 3 @font-face qui permet de récuperez une police sur le web mais le support par les Navigateur Web n’est pas universelle. Le plus 3 ligne dans le fichier CSS temps pour la mise en œuvre 2 minute.
    Marche sous Safarie 5 Mac mais Opéra 11 beta et firefox 3.6 Je n’ai pas réussis

  10. @font-face est une nouvelle propriété de CSS 3 qui permet de charger à la volée des polices de caractères au format TrueType (.ttf) ou OpenType (.otf) hébergées sur Internet et non sur le client.

    Pour ma part c’est cette solution et de la police de remplacement commune (police sur le pc client) dans le cas d’un vieux navigateur… Arrive un moment ou il faut « imposer » au gens de se mettre à jour au niveau navigateur ( qui sont gratuits) et ne plus se faire freiner par quelques boulets (cf IE6 -7 a l’époque). On a enfin un outil, simple, efficace et surtout officielle ( norme CSS) alors je ne m’aventurerais plus dans quelconque bidouille JS

  11. @eric AM fait référence a la fonction php imagettftext() qui permet d’écrire n’importe quel texte sur une image.

    Même si le texte généré dans l’image peut être paramétré (et donc dynamique), ça reste tout de même HYPER lourd… quid du texte trop long qui nécessite parfois un retour a la ligne et dont la fenetre est en cours de redimensionnement par l’utilisateur…

    IE permettait de gérer les fonts distante (a conditions d’avoir les bons droits d’utilisation) au moins depuis sa version 6. Je suis ravis que w3c l’ai normalisé dans css3 En revanche, il s’agit de purement de CSS, aucune dépendance javascript n’est nécessaire.

  12. @Benoit Chleide @Eric, j’ai eu de maintes occasions pour utiliser cufon, je note que ce script est tres particulier :

    – jquery (conflict)
    – temps de chargement
    – ne convient pas a tous les contenus du sites (doit specifier, h1 : title, et ainsi de suite)
    – ne semble pas etre SEO friendly.

    Cheers

  13. @AM : tout d’abord, on dit « porte nawak »
    @Eric @Jérémy trop lourd, oui et non. Une fois les images générées, il suffit de les stocker sur son serveur pour ne pas avoir à les régénérer à chaque passage. D’ailleurs, il me semble qu’un plugin WordPress le permet.
    @macrophotographie : les propriétés CSS3 sont un atout indéniables dans ce genre de cas. Exceptés pour les polices qu’on paie super cher et où le premier « plouc » (désolé pour l’expression) venu va s’aventurer dans le code et piquer la police aussi sec. Certe, il ne faut pas utiliser les polices payantes, mais il faut rester prudent quant à ce genre de procédé.

  14. @Jérémy « AM fait référence a la fonction php imagettftext() qui permet d’écrire n’importe quel texte sur une image » c’est exactement ce que j ‘ai dit… « HYPER lourd » tout dépend de l’utilisation…
    @Pat désolé pour la faute. Quand t’achète une police c’est bien souvent le droit d’utilisation, donc si le mec le pique à ses risques et périls.

  15. ah ben ça a buggé …
    je disais qu’en récupérant les urls on peut télécharger les fichiers css et la font …donc passer tout ça en local … du coup je reposte pas les urls dans le com…ça fait planter on dirait …

  16. Dites les gars, c’est intéressant d’avoir des avis techniques – parfois opposés, mais c’est ainsi – par contre si certains faisaient un petit effort sur le français (sans focaliser là-dessus) ça rendrait les choses tout de même plus compréhensibles.
    Thanks (oops!)

  17. Pingback: Google Font API, un Arial killer? | Ta vie on s'en fout!

  18. Bonjour à tous,

    En tant qu’intégrateur j’aurais tendance à favoriser la technique @font-face. sIFR et Cùfon étant 2 technologies non accessibles :
    – dépendant de Flash ou JS
    – texte non sélectionnable
    – page plus lourde

    J’avais écrit un modeste article sur le sujet sur mon blog :
    http://www.web-actually.fr/act.....ypographie

    PS : Pour ceux qui ont du mal avec la pixelisation des caractères (notamment sous Windows), pensez à utiliser la propriété CSS font-size-adjust.

    PS² : Google vient d’étoffer son offre sur Google Font Directory, dorénavant c’est près de 60 polices disponibles. Par contre l’outil de prévisualisation de Google, bof bof…
    En payant, vous avez aussi typekit.com, fontslive.com, fontspring etc…

    Bonne fêtes de fin d’année à tous 🙂

    Bien amicalement

Répondre