Comment utiliser une police originale sur son site web?

Comment utiliser une police originale sur son site web?

Comment utiliser une police originale sur votre site web ? La méthode que nous allons voir repose sur le css. Elle n’alourdira pas votre code comme le fait la librairie javascript « Cufon ». Apprenez aussi comment contourner le problème « Internet Explorer ».

Vous avez déniché une police originale qui met en valeur votre contenu. Vous avez essayé de la mettre sur votre site en utilisant la propriété « font-family ». Malgré vos efforts, elle n’apparaît pas.

Que se passe-t-il quand la police ne s’affiche pas ?

Pour qu’une police s’affiche sur un site web, elle doit exister sur l’ordinateur. Le jeu de polices qu’on appelle « standard » ou « web safe », désigne en fait les polices communes aux différents systèmes (Linux, Mac, Windows…).

Ces polices sont très connues. Ces noms vont diront sûrement quelque chose: Arial, Helvetica, Comic Sans MS, Courier, Georgia, Lucida Grande, Palatino Linotype, Times New Roman, Trebuchet MS, Helvetica, Verdana… et bien d’autres.

Evidemment, un ordinateur ne possède pas toutes les polices au monde !

Si vous utilisez une police exotique sur votre site, vous devez indiquer à l’ordinateur _ou plutôt au navigateur_ de la télécharger afin de pouvoir l’utiliser.

Comment importer sa propre police ?

C’est le rôle de la propriété « @font-face ».

/* Déclaration de la police */
@font-face {
    font-family: "Le Nom de la Police";
    src: url('NomPolice-Regular.ttf');
}

/* Déclaration de la police  version "gras" */
@font-face {
    font-family: "Le Nom de la Police";
    font-weight: bold;
    src: url('../fonts/'NomPolice-Bold.ttf');
}
N’oubliez pas de mettre les fichiers NomPolice-Regular.ttf et NomPolice-Bold.ttf dans le même dossier que votre fichier CSS.

Ensuite, vous pourrez l’utiliser de façon habituelle:

/* Utilisation de la police "regular" */
*{
	font-family: "Le Nom de la Police";
}

/*  Utilisation de la police "bold" */
.bold{
	font-weight: bold;
}

/*  Utilisation de la police "italic": 
/*	comme elle n'a pas été déclarée, ceci ne fonctionnera pas */
.italic{
	font-style: italic;
}

Le problème d’Internet Explorer

Le format compatible

Internet Explorer ne comprend le format .ttf que depuis la version 9.

Comment faire avec les versions antérieures ? Il faut utiliser le format.eot.

Convertir ses fichiers .ttf en .eot

Pour convertir vos fichiers, vous pouvez utiliser cet outil en ligne gratuit.

Ciblez Internet Explorer 6, 7 et 8

Ciblez ces versions avec une feuille de style alternative .

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="/internet-explorer.css" media="screen" />
<![endif]-->

Importez les polices grâce à ce fichier CSS

/* Utilisation de la police "regular" */
@font-face {
    font-family: "Le Nom de la Police";
    src: url('NomPolice-Regular.eot');
}

/* Utilisation de la police "bold" */
@font-face {
    font-family: "Le Nom de la Police";
    font-weight: bold;
    src: url('../fonts/'NomPolice-Bold.eot');
}

Pour une implémentation plus rigoureuse, je vous conseille cet excellent billet de Paul Irish (en anglais, niveau CSS confirmé) :

Où trouver de telles polices ?

C’est un sujet que je n’ai pas encore exploré en pratique. Mais comme je souhaite changer la police sur ce blog, je m’y intéresse.

Dans mes recherches, je me suis arrêtée sur deux ressources très connues:

Si je n’y trouve pas mon bonheur, je poursuivrai ma recherche. Je suis sûre que de nombreux autres sites existent.

Je suis tombée au hasard sur ce site qui propose de créer sa propre police, basée sur son écriture. Ca pourrait être marrant, mais il existe peut-être un meilleur service. A approfondir :)

Sources

Comment utiliser une fonte «non-standard» sur un site Web ?

Avez-vous déjà joué avec ces outils ? Quelle est votre expérience et quels seraient vos conseils en la matière ?

CSS, HTML, internet

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

19 commentaires

  1. Cet article est vraiment intéressant, mais en suivant le lien vers google web font on voit que MrG propose directement le code à mettre en méta pour utiliser les police avec un indicateur de rapidité d’utilisation/police, que vaut ce système ?

    Répondre
    • Bonjour Shelko,
      Ce code revient au même. En fait, Google met à disposition des fichiers CSS contenant le code adéquat (IE6/7/8 y compris). Le code proposé est une simple balise style pour importer la feuille de style.

      Par contre, il faudra faire attention au « character sets » pour vérifier que les accents, cédille et consors sont bien rendus.

      Répondre
  2. Merci pour la méthode. Mais je dirais pour tout ceux qui souhaite que les lecteurs de leur blog ou site reste le plus longtemps. Il faut faire attention.
    L’originalité c’est bien mais il faut penser avant tout à la lisibilité pour le confort du lecteur.

    Répondre
    • Bonjour Marjo,

      Tu fais bien de soulever ce point. Il est en effet capital de privilégier le confort et la lisibilité.

      Répondre
  3. Le gros problème des font sera le rendu sur les différents OS : sous mac les fonts sont carrément différentes par rapport à windows. Donc à tester sur les deux plateformes, de préférence. Cùfon apporte un semblant de réponse, mais sous IE les polices sont « crispy » et c’est assez laid…

    Donc la solution CSS3 est la meilleure tout de même.

    Sinon, petite parenthèse, tu as quel âge Marie Eve? 😮

    Répondre
    • Bonjour Nicolas,
      Avec la méthode CSS justement, les polices deviennent indépendantes de l’OS puisque tu les importes. La compatibilité est assurée même pour IE (en utilisant le format eot)!

      C’est une sacré parenthèse que tu ouvres…on demande son âge à une dame maintenant ??

      😀 Je plaisante…j’ai bientôt 29 ans (et toutes mes dents!)

      Et toi, ça te fait quel âge ? (moi aussi je suis curieuse 😉 )

      Répondre
      • Aha tu me semblais plus jeune ! J’aurai 22 ans cette année.

        Les polices ne sont pas totalement indépendantes de l’OS, puisque l’OS continue d’interpréter le fichier. Si je te dis ça c’est que j’en ai fait le test personnellement, je suis du genre à chipoter au pixel près (et avec certaines polices comme Shelby c’est plus des dizaines de pixels de décalage, malheureusement).

        Firefox a aussi tendance à afficher des polices légèrement plus grasses que ses concurrents, quel que soit l’OS.

      • Oui oui, essaie de te rattraper… 😉

        Pour les polices, ça semble logique qu’il y ait une petite différence comme tu le soulignes. Je suis pas très regardante au pixel près…

      • C’est des dizaines de pixels de décalage par moments ! C’est carrément visible.

        Tu t’en apercois rapidement quand tu essaies de centrer verticalement^^

      • Centrer verticalement, c’est un truc que j’essaie d’éviter dans tous les cas. Le web a souvent un contenu vivant, et les designs au millimètres ne tiennent pas trop la route (à mon humble avis, je ne dis pas que je détiens la vérité oO).

        Après, si le client est vraiment ch*ant…je centre 😉 mais faut pas qu’il vienne pleurer parce que les navigateurs (et qui plus est les OS) interprètent un chouïlla différemment!

        Au passage, si tu as des astuces de perfectionniste, je prends :)

      • Bah centrer à la base c’est pas compliqué, SAUF pour le cas des polices exotiques… Et je suis du genre à vouloir des design au px près^^

        J’ai pas mal d’astuces oui, je fais des sites webs depuis que je suis tout petit j’ai beaucoup d’expérience à ce niveau là. Si un jour tu as une question tu as mon mail, je te prouverai ma compétence ;D

  4. Bonjour Marie-Ève,

    Trois petites questions:

    1° Cufon: N’est-ce pas un peu lourd pour afficher une police exotique si je veux parler du poids au niveau ko?

    2° Et si je veux parler du fait d’appeler une librairie xyz pour afficher des typo exotiques: Est-ce la meilleure solution?

    3° Accents: Lorsqu’on met des accents à caractères accentués, quelle est la solution quand on rencontre un problème? Qu’est-ce qu’on fait avec le générateur du site Cufon?

    Merci pour vos réponses!

    Réal

    Répondre
    • Bonjour Réal,
      1/ ça dépend de la police employée, à toi de choisir une police pas trop lourde (c’est vrai aussi avec les méthodes CSS).
      2/ Non, la meilleure solution est le CSS.
      3/ Il faut choisir une police qui les contient d’origine. Prend plutôt des polices européennes que américaines. 😉

      Répondre
  5. Bonjour,

    Il y a un moment pour aider un ami qui révise son algorithmique pour le BTS, je lui ai crée une plateforme pour réviser. J’ai voulu la rendre aussi jolie que possible en utilisant des polices d’écritures personnalisées mais dès que je les aies mises en place le chargement des pages a augmenté considérablement. Penses-tu que le problème vienne des polices ?

    Voici l’adresse du site : http://www.jamalwebsite.com/
    Il est hébergé sur un serveur OVH

    Merci par avance,
    Martel Angélique

    Répondre
    • Bonjour Angélique,
      oui les polices peuvent vraiment ralentir la page. Pour l’instant, avec la connexion que j’ai (et le pc qui n’est pas le mien), je ne peux pas analyser ce qui ralentit ton site. Mais je suis très intéressée par le sujet du site, et je retournerais y jeter un oeil à mon retour. Si fin juillet tu n’as aucune nouvelle de moi, tu peux me le rappeler s’il te plait ?

      Est-ce normal que tout (le contenu aussi) soit sur fond violet ? C’est très dur à lire. Mais la page charge encore, peut-être que le fond blanc viendra après ?

      A très bientôt :)

      Répondre
  6. Ce qui est sûr, c’est que l’horrible « comic sans MS » fonctionne toujours et facilement. Incroyable le succès de cette police mal conçue.

    Répondre
    • N’empêche que les graphistes sont toujours bien remontés contre cette police sans jamais expliquer pourquoi. Je trouve ça un peu dommage.

      Je ne dis pas ça pour toi, je voudrais juste donner mon point de vue sur cette police que j’utilisais il y a encore quelques semaines. Je l’utilisais en sachant pertinemment qu’elle était mal-aimée, mais moi quand on ne m’explique pas…je continue!

      Un jour un lecteur m’a signalé de ne plus utiliser cette police en me disant « qu’elle dépréciait le travail des graphistes à un point inimaginable »…je n’avais toujours pas compris en quoi. Et j’ai gardé la police!

      Et finalement, c’est Yvon (de copywriting-pratique) qui m’a expliqué qu’elle était tellement vu et revue, qu’elle en était devenu ringarde, has-been, dépassée. Et que de l’utiliser revenait à adopter le style graphique du début des années 2000…

      Ah l’électrochoc! C’est donc pour ça qu’elle est si mal-aimée! Je peux te dire que j’en ai changé dans la foulée. J’ai pris cooper (pour le titre), qui selon mes yeux de non-graphiste, est quasiment la même, la classe en plus! :)

      Voilà, je tenais à donner mon point de vue sur le sujet. Mais pas de bile…je ne t’attaque pas en particulier. Je rebondit, c’est tout! 😉

      A bientôt !

      Répondre
  7. Bonjour !

    J’aimerais savoir si ce système fonctionne aussi avec les forums (notamment forumactif) et si oui, est ce que je pourrais avoir des explications car je ne suis pas sur de bien saisir la marche à suivre !

    Merci !

    Répondre
    • Bonjour Yuki,
      Oui il fonctionne avec tout type de site web, il faut agir sur le fichier CSS. Je ne vois pas quoi dire de plus, tout est dans l’article. Si vous ne connaissez rien au CSS, vous devriez lire cette série de tutoriel (seulement le début, pour voir si ça vous intéresse).

      Bon courage!

      Répondre

Trackbacks/Pingbacks

  1. Les statistiques du blog en Mai 2012 - Les Doigts dans le Net - [...] j’ai changé la police du blog : désormais, j’utilise « MgOpenCosmetica » (pour savoir comment faire, lisez mon article: Comment utiliser…
  2. Les Doigts dans le Web #5 : ressources HTML & CSS - Les Doigts dans le Net - [...] Comment utiliser une police originale sur son site web? [...]
  3. Google Web Fonts en 5 conseils pratiques [Article invité] - Les Doigts dans le Net - [...] y a quelques mois, je vous avais expliqué comment utiliser une police originale sur votre site web grâce à…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint