Comment installer une police de caractère pour votre site

polices de caractères originales pour votre blogLes polices de caractères les plus communes ne conviennent pas forcément à l’esprit de votre blog ou site. Voici une méthode rapide pour installer une police de caractère originale visible quelque soit le navigateur de vos visiteurs.

L’idée m’est venue lors de la mise en ligne de ma rubrique dédiée au SEO. Je souhaitais afficher une police de caractère proche de l’écriture manuscrite, pour donner un aspect « blog note » à ma page (feuille ?) en cours de rédaction.

Ce n’est pas parce que vous disposez d’une police de caractère sur l’ordinateur qui vous a permis d’élaborer vos pages que vous les retrouverez sur votre site. Tout simplement parce-que les fontes visibles sur votre PC sont celles de votre système d’exploitation, elles ne sont pas nécessairement présente sur le serveur qui va héberger votre site.

L’intégration de polices de caractère directement sur le serveur d’hébergement n’est pas à la portée de tout le monde. Heureusement, des alternatives existent.

Utiliser la Google Web Font Api.

Intégrer cette application est plus simple que le nom barbare qui la désigne peut le laisser paraître.  Le principe est de laisser à l’application gérer les question de compatibilité entre les différents navigateurs et proposer à l’affichage une police de caractère proche ou identique à celle que vous avez choisie. Voici la méthode que je trouve la plus rapide :

  • Dans un premier temps, vous devez vous rendre sur le site Google Web Font

api de google webfont

  • sélectionnez la police qui vous convient parmi les [presque] 300 proposées.

activer-selection-google-webfont

  • Cliquez sur [Quick Use]

selection-du-code-a-integrer-google-web-font-api

  • Vous obtenez une ligne de code à intégrer dans votre page HTML, où vous le souhaitez, pourvu que ce soit entre les balises <head> …/… </head>

    Voici le code à placer (pour la fonte choisie dans l’exemple) sur une seule ligne :

    <link
    href='http://fonts.googleapis.com/css?family=Supermercado+One'
    rel='stylesheet' type='text/css'>
  •  Et ensuite, dans les propriétés CSS de vos pages il vous suffira de faire appel à la propriété font, avec la syntaxe suivante :
    #element {
    	font-family:Supermercado One;
    }
    oou
    .classe {
    	font-family:Supermercado One;
    }

    Vous remarquerez que le signe ‘+’ a disparu.

Voici un moyen rapide et efficace de repousser les limites dans le choix des fontes et d’enrichir visuellement le contenu de vos pages pour le plus grand bonheur de vos visiteurs.

D’autres techniques existent, n’hésitez pas à faire part de votre expérience.

Dernière minute !
Alors que je termine la correction de cette article (dont une première version a été publiée sur mon ancien blog), je suis informé de la sortie officielle du guide d’Alexandra Lemonnier : 1001 polices de caractère pour votre site web. Comme je connais Alexandra et que j’ai un véritable respect pour son travail, c’est tout naturellement que j’en fais mention ici. Avec les informations et conseils contenus dans ce guide, la personnalisation des polices de caractère s’affranchit définitivement des limites imposées par le navigateur de vos visiteurs. C’est un atout supplémentaire qui viendra vous aider à travailler l’image qualitative de votre site. Un extrait est disponible au téléchargement ici : donnez du style à vos sites web avec des polices de caractères originales.

[N. D. L. R. : les liens d'accès mentionnés dans cette fin d'article sont des liens d'affiliation. ]

A lire également:

  1. Installer une extension pour wordpress
  2. Un thème WordPress pour les marketeurs
  3. Clear-agent.ru vous menace
  4. Le lecteur Blu-ray de la Freebox en multi-zone
  5. Profitstheme en détail

Author:

There is no additional info about this author.

7 thoughts on “Comment installer une police de caractère pour votre site

  1. [...] Comment installer une police de caractère pour votre site [...]

    Reply
  2. Claude on 12 mars 2012

    Hello Jean-Michel,

    C’est vrai que les Google Fonts nous changent la vie.
    On peut maintenant se libérer des Arial, Verdana, Serif…
    Et rivaliser un peu avec le print.

    Merci pour ce petit tuto ;)

    Reply
  3. nico on 30 mars 2012

    Bonjour,
    je débute dans la création d’un site avec wordpress, et j’aimerais utiliser une police que j ‘ai télécharger : http://www.fonts4free.net/handelbar-font.html

    je ne sais pas trop comment faire pour la mettre en place ……. (aucune connaissance en codage ou autre ….)

    merci d’avance du coup de main ….

    Reply
    • jeanmich on 31 mars 2012

      Bonjour Nico et merci pour votre visite.

      Il faudrait savoir ce que vous entendez par « je n’ai aucune connaissance en codage ou autre » avant de pouvoir vous aider.
      Avez-vous jeté un oeil au guide d’Alexandra Lemonnier?

      Reply
  4. nico on 31 mars 2012

    Merci pour le liens,  » en cours de lecture , et apprentissage  » :)
    Quand je dit que je n’ai aucune connaissance en codage c’est a prendre au pied de la lettre …..

    En faite j ai déjà demander de l’aide a des personnes qui m’ont dit de convertir la font avec cet outil : http://www.fontsquirrel.com/fontface/generator

    Et de placer les fichiers générer dans mon thème et modifier le fichier css pour appliquer cette font….

    Ce qui est surement clair quand on comprend …….

    Donc question ( si vous savez y répondre j aurais déjà appris pas mal de chose … ) je le trouve ou le fameux thème ou je dois mettre les fichier et que dois je modifier ou remplacer dans le fichier css….

    merci d’avance !

    Nico

    Reply
  5. nico on 1 avril 2012

    Merci beaucoup j’ai trouvé la solution …..

    Bonne continuation.

    Reply

Laisser un commentaire

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

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Extension Factory Builder