Comment installer une police de caractère pour votre site

Posted on 18 février 2012 by jeanmich

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. ]

Je suis généreux, vous pouvez partager !

This entry was posted in HTML and tagged , . Bookmark the permalink.

One Response to "Comment installer une police de caractère pour votre site"