Jean-Philippe Fleury

informatique libre • art libre

Utiliser des polices de caractères personnalisées pour un site web

Habituellement, le choix des polices de caractères pour un site web est limité aux polices les plus répandues sur les ordinateurs des internautes. Toutefois, la propriété @font-face de CSS 3 permet de préciser au navigateur une police accessible en ligne.

Format des polices en ligne

Firefox (v3.5+), Google Chrome (v4+), Opera (v10+) et Safari (v3.1+) reconnaissent le format .ttf et .otf. Pour sa part, Internet Explorer, jusqu'à la version 8, ne reconnaît que le format .eot.

Il existe également un format créé spécifiquement pour le web: le format WOFF. Les fichiers étant compressés, ils sont plus légers et moins longs à télécharger. Ce format est reconnu par Firefox (version 3.6+), Google Chrome (version 6+) et Internet Explorer à partir de la version 9.

Il est heureusement possible avec la propriété @font-face de préciser plusieurs formats différents pour une même police.

Conversion entre différents formats

À partir du format .ttf, il est possible d'effectuer une conversion vers le .eot d'Internet Explorer et le format compressé .woff.

Conversion du .ttf ou .otf vers le .eot

  • Télécharger le script Python eotlitetool (sous triple licence MPL/GPL/LGPL).

  • En ligne de commande (testé sous GNU/Linux): ./eotlitetool.py fichier.ttf

Note: voir le script ttf2eot (non testé).

Conversion du .ttf ou .otf vers le .woff

  • Télécharger l'outil sfnt2woff (sous triple licence MPL/GPL/LGPL), écrit en C.

  • Pour générer un fichier exécutable pour GNU/Linux, ouvrir une console dans le dossier de l'outil et lancer la commande suivante:

    make sfnt2woff
    

    Note: si, lors de la compilation, l'erreur suivante survient:

    woff.c:43:18: fatal error: zlib.h: Aucun fichier ou dossier de ce type
    

    installer le paquet zlib1g-dev (testé sous Ubuntu 11.04):

    sudo apt-get install zlib1g-dev
    
  • Effectuer la conversion avec la commande suivante:

    ./sfnt2woff fichier.ttf
    

Mise en ligne

Le code ci-dessous montre ce que doit contenir la feuille de style CSS. À noter qu'il y a une déclaration pour le .ttf et une autre pour le .otf, et ce dans le but de montrer la syntaxe pour chacun. Seulement un ou l'autre est nécessaire.

@font-face {
    font-family: 'MaPolice';
    src: url('ma-police.eot');
    src: local(Ma Police),
        url('ma-police.woff') format('woff'),
        url('ma-police.ttf') format('truetype'),
        url('ma-police.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MaPolice';
    src: url('ma-police-bold.eot');
    src: local(Ma Police Blod),
        url('ma-police-bold.woff') format('woff'),
        url('ma-police-bold.ttf') format('truetype'),
        url('ma-police-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MaPolice';
    src: url('ma-police-italic.eot');
    src: local(Ma Police Italic),
        url('ma-police-italic.woff') format('woff'),
        url('ma-police-italic.ttf') format('truetype'),
        url('ma-police-italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'MaPolice';
    src: url('ma-police-bold-italic.eot');
    src: local(Ma Police Bold Italic),
        url('ma-police-bold-italic.woff') format('woff'),
        url('ma-police-bold-italic.ttf') format('truetype'),
        url('ma-police-bold-italic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

Ensuite, MaPolice peut être utilisé

body {
    font-family: MaPolice, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
}

Test avec la police Ubuntu

Voici un test effectué avec la police Ubuntu, distribuée sous la licence Ubuntu Font. Les polices au format .ttf ont été converties vers le .eot et le .woff. Un fichier font-face.css se trouve à la racine du dossier. Il ne reste plus qu'à inclure ce fichier CSS dans votre page et à préciser les éléments à styler, par exemple:

body {
    font-family: Ubuntu, sans-serif;
}

Télécharger l'archive comprenant tous les fichiers de test.

Liens

Haut