Polices de caractères pour site web

© Christian PAULUS. Document créé le 11 mars 2010 , mis à jour le 30 janvier 2011.

C'est le devoir de chaque homme de rendre au monde au moins autant qu'il en a reçu. Albert Einstein

Accueil du site > Outils > Polices de caractères pour site web

font-face/ttf/eot / SPIP 2.n

Lassé(e) de voir toujours les mêmes polices de caractères ? Besoin de changer ? D’innover ? D’illustrer ? Qu’importe ! Il est maintenant possible d’utiliser (presque) n’importe qu’elle police de caractères pour son site.

Presque ? Oui. Car s’il existe des milliers de fontes gratuites, un petit nombre d’entre elles sont adaptées au web. Dessin de mauvaise qualité, alphabet incomplet, absence des caractères accentués vous permettront de passer de nombreuses nuits blanches à fouiller sur toile.

Fontes_Importer (FonI) est un plugin pour SPIP qui facilite la gestion des fontes.

Le principe :

  • Vous placez les fichiers de fontes dans un répertoire nommé polices
  • Vous sélectionnez la ou les fontes désirées via l’interface privée
  • Vous ajoutez le nom de la famille de la fonte à vos feuilles de styles

La fonte est automatiquement appelée ou incorporée dans les pages de votre site.

Avertissements

FonI, est un programme libre, vous pouvez le redistribuer et/ou le modifier selon les termes de la Licence Publique Generale GNU publiée par la Free Software Foundation (version 2 ou bien toute autre version ultérieure choisie par vous). FonI, est distribué, car potentiellement utile, mais SANS AUCUNE GARANTIE, ni explicite ni implicite, y compris les garanties de commercialisation ou d’adaptation dans un but spécifique. Reportez-vous à la Licence Publique Générale GNU pour plus de détails. Vous devez avoir reçu une copie de la Licence Publique Générale GNU en même temps que ce programme ; si ce n’est pas le cas, écrivez à la Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307, Etats-Unis.

FonI, is free software ; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation ; either version 2 of the License, or (at your option) any later version. FonI, is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY ; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this package ; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.

Installation

Téléchargez l’archive FonI sur la zone puis décompressez-la. Le résultat est un dossier portant le nom du plugin, dossier qu’il vous faut placer le dossier du plugin, dans le dossier plugins de votre site. Pour plus d’information sur l’installation d’un plugin, consultez cette page sur Spip.net.

Configuration

En espace privé, cliquez sur le bouton Configuration puis sur l’onglet Fontes Importer. La fenêtre de configuration apparaît. Dans la boîte de gauche, cliquez sur un nom de fonte pour visualiser cette fonte en diverses tailles dans la boîte centrale.

PNG - 102 ko
Fenêtre de configuration de fontes_importer

Cochez la case de la fonte que vous désirez utiliser dans votre site.

Cochez la case Incorporer la fonte si vous désirez que cette fonte soit directement incorporée à toutes vos pages.

Dans le cas d’une incorporation, vous gagnez un hit, mais par contre votre page prend du poids. A vous de tester et de valider la bonne méthode.

La fonte, des graisses

Pour chaque fonte il doit y avoir une graisse ou un style, parfois un corps (taille) différent. Le dessin d’une fonte en italique donne un bien meilleur rendu que d’appliquer le style italic au caractère roman. Mais il vous faudra probablement accepter un compromis. Une fonte pesant environ 50 kilo-octets, si vous désirez interpréter proprement toutes les fontes nécessaires d’une police de caractères, vous dépasserez allégrement les centaines de kilo-octets, au détriment du confort de l’utilisateur.

Où trouver des fontes gratuites

Utilisez votre moteur de recherche favori et utilisez les mots-clés « free fonts ». Vous n’aurez que l’embarras du choix. Attention aux droits d’utilisation/publication. Certains sont réservés à une utilisation non-commerciale. Il y a plusieurs milliers de fontes disponibles sur la toile. Vous trouverez certainement celle désirée quelque part. Soyez patient.

Les formats de fontes reconnus

Les formats reconnus sont :
— eot (Embedded_OpenType) pour Internet Explorer
— ttf, (TrueType font) pour les autres navigateurs
— svg et otf sont également reconnus par certains navigateurs. Ces deux formats ne sont pas traités par FonI. La plupart du temps, les fontes gratuites sont disponibles au format ttf, parfois hqx (ancien format de transfert en 7 bits dans lequel se trouvent des fontes Mac en .bin). Pour transformer une fonte ttf en eot, vous pouvez utiliser un utilitaire tel que ttf2eot (sur MacOsX, entrez dans la console « sudo port install ttf2eot » pour installer l’outil). Pour ceux qui ne peuvent pas, ou qui ne veulent pas installer l’outil, il existe un outil de conversion ttf/eot en ligne, mis à disposition par Sebastian Kippe.

Pour convertir une fonte ttf en eot :

# ttf2eot ma_fonte.ttf > ma_fonte.eot

Pour les fichiers Mac bin.hqx, il vous faut un utilitaire du style fondu.

Où placer la fonte

Après avoir préparé les fichiers nécessaires (fichier ttf et eot), placez ces deux fichiers dans le répertoire polices.

FonI recherche le répertoire polices dans cet ordre :

— dans le répertoire du plugin
— dans le ou les dossiers définis par $GLOBALS[’dossier_squelettes’]
— dans le répertoire /squelettes
— à la racine du site
— dans le répertoire /squelettes-dist

Vous pouvez donc recopier vos fontes dans le répertoire polices qui vous convient le mieux.

S’il est un conseil aisé à donner : conservez les caractères standards, ceux présents sur le poste de travail, pour le texte courant, voire pour les sous-titres. Ils sont bien dessinés et adaptés à l’écran de leur propriétaire.

Evitez de charger plusieurs fontes. Conseil de graphiste : ne pas dépasser 3 ou 4 fontes, au risque de brouiller la lecture.

Essayez de l’optimiser avant publication. Editez le fichier ttf avec un outil du type fontforge et supprimez les caractères inutiles pour votre site.

Extensions par utilisation des fontes WOFF

Depuis la version 1.01.00 du plugin, il est possible de prendre en compte les fichiers au format WOFF.

Il suffit de placer votre fonte dans ce format dans le dossier qui contient les autres fontes. Le plugin détecte automatiquement sa présence et ajoute la fonte à la liste à incorporer dans un nouveau squelette : inc-head_font_face_v2.html

Ici, les formats sont appelés tour à tour :

  • au format eot (reconnu par IE)
  • au format woff (reconnu par FireFox 3.6+)
  • au format ttf pour les autres navigateurs.

Pour générer un fichier au format woff, vous pouvez par exemple utiliser l’outil de conversion de fontes mis à disposition par fontsquirrel.

Modifier ses feuilles de styles (CSS)

Recopiez dans votre dossier de squelettes les feuilles de styles fournies avec la distribution de SPIP et adaptez-les.

Si par exemple vous avez ajouté une fonte dont le nom de famille est mafonte, corrigez le fichier habillage.css en ligne 13 :

h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; font-weight: normal; font-size: 1em; font-family: mafonte, Georgia, Times, serif; }

Autre solution : ajouter en fin de votre fichier inc-head.html quelques lignes de codes CSS du style juste avant le </head> :

<style type="text/css">
/*<![CDATA[*/
h1,h2,h3,h4,h5,h6 { mafonte, serif }
/*]]>*/
</style>

Ces quelques lignes écraseront les précédentes déclarations pour les titres de niveaux 1 à 6, pour une fonte dont la famille est mafonte, sans empâtements.

Si vous ne savez pas manipuler le CSS dans le texte, lire ce billet sur Pompage ou sur Alsacréations ou cherchez sur le web. Ce ne sont pas les tutoriels qui manquent !

Adapter la fenêtre de visualisation

En espace privé, sur la page de gestion de FonI, lorsque vous cliquez sur le nom d’une fonte, la fenêtre de visualisation apparaît et affiche la fonte dans divers corps.

Si cet affichage ne vous convient pas, vous pouvez la modifier :

  1. recopiez modeles/foni_font_exemple.html dans votre répertoire de squelettes
  2. éditez cette copie de modeles/foni_font_exemple.html et adaptez-la à vos besoins

Documentation complémentaire sur font-face et les fontes

Si besoin :
— Document officiel du W3 sur font-family (en)
— Schéma data URI, ou comment encoder un fichier externe directement dans la page web (en)
— un billet de Valéry sur font-face (fr)
— Présentation de Open Font Licence par typographe.com (fr)
— CSS @font-face : Des polices personnalisées (fr)
— Excellent billet de Estelle Weyl : @font-face Browser Support & Tutorial (en)
— Autre tableau browser/fontes
— Convertisseur en ligne pour les formats EOT, SVG, WOFF
— Billet de Estelle Weyl @Font-Face Browser Support & Tutorial (en)

Plussoyez !

Répondre à cet article

  • Polices de caractères pour site web 19 avril 2010 10:42, par Horetol

    Bonjour,

    Sur deux sites en SPIP 2.0.10 [14698] je n’arrive pas à faire fonctionner le plugin Fontes-importer (http://plugins.spip.net/Fontes-Importer).

    Quel que soit le répertoire dans lequel je mets des polices (ttf) (/polices du plugin ou /squelettes/polices/ ou à la racine du site) le plugin ne les voit pas.

    Est-ce que je fais une erreur qqpart ?

    D’autre part, comment supprimer l’incorporation involontaire d’une police ?

    Merci

    Répondre à ce message

  • Polices de caractères pour site web 31 décembre 2010 12:03, par Antoine
    Bon plugin mais il est incompatible avec MEDIABOX. Sur un SPIP 2.1.2 [16017] votre plugin, quand il est activé, bloque MEDIABOX 0.6.3.

    Répondre à ce message

    • Polices de caractères pour site web 31 décembre 2010 17:03, par Christian PAULUS

      C’est sous Firefox uniquement ? Car sous chrome, pas de soucis.

      Ca ne vient pas du plugin, mais de la console firefox (en gros, activer firebug active le fonctionnement des deux plugin, désactiver firebug par contre bloque le tout).

      Et je ne sais pas si le ’’bug’’ apparaît sans firebug.

      Correction apportée dans ce sens.

      Pas vraiment une correction. En gros, la console n’est plus utilisée. Ca règle - semble-t’il - le problème.

      PS : ne pas oublier de vider le cache pour constater le changement.

      Répondre à ce message

  • Polices de caractères pour site web 30 janvier 2011 19:01

    Juste pour info : sous IE 6, mon site n’affichait pas la bonne typo. Ok sous Firefox, Chrome.

    Ca venait du fichier EOT. peut-être abimé via le transfert FTP ? Après re-génération via squirel, ça fonctionne.

    Merci.

    Répondre à ce message

  • fonctionne sous SPIP 2.1.13 ? 7 mai 2012 23:20

    Bonjour,
    Je viens de découvrir ce plugin mais les tests sont laborieux. Je suis sous SPIP 2.1.13 :
    - le lien vers la page de config n’apparaît dans le menu du bandeau ; je dois taper ecrire/ ?exec=foni_config à la main.

    J’arrive sur la bonne page !

    je vois bien 2 polices à gauche mais une fois validé rien n’apparaît dans le cadre de visualisation. J’ai bien les 2 versions eot et ttf installées.

    J’ai désinstallé et réinstallé le plugin.

    dd

    Répondre à ce message