Les 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
- sélectionnez la police qui vous convient parmi les [presque] 300 proposées.
- Cliquez sur [Quick Use]
- 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:
- Installer une extension pour wordpress
- Un thème WordPress pour les marketeurs
- Clear-agent.ru vous menace
- Le lecteur Blu-ray de la Freebox en multi-zone
- Profitstheme en détail
Jean Michel Silone
9, Avenue de Taluque 
(0)9 50 07 34 24
(0)6 74 81 21 04
[...] Comment installer une police de caractère pour votre site [...]
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
Salut Claude,
ce petit tuto est utile, certes, mais il reste modeste : comme tu as pu le lire en fin d’article, Alexandra Lemonnier fait bien mieux
A plus,
Jean Michel
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 ….
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?
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
Merci beaucoup j’ai trouvé la solution …..
Bonne continuation.