Google Web Fonts

Tout d'abord, Google Web Fonts est un service proposé par Google afin que vous puissiez utiliser les polices en toute simplicité. Il regroupe un tas de polices pour toute utilisation. Vous avez la possibilité soit de les télécharger, soit de les laisser hébergées chez Google et de vous en servir.

1ère étape : le site

Pour commencer, rendez-vous sur : Google Web Fonts.

2ème étape : le choix

Le fonctionnement de ce site est assez intuitif. Vous aurez le loisir de scroller encore et encore, ou bien vous pourrez faire une recherche. Vous pouvez également filtrer vos recherches par types de polices.

Farfouillez un peu et trouvez-en une qui vous éblouit.

La bande fixée en bas résume les polices que vous avez choisies. Pour choisir une police, vous pouvez clickez sur "Add to collection" (le bouton avec un fond bleu à droite de chaque police). Vous pouvez ainsi ajouter plusieurs polices à votre collection et vous n'aurez au final besoin que d'un seul code que google va vous donner tout frais. Quand vous avez fini clickez sur "use" tout en bas à droite.

Vous arrivez sur une nouvelle page, vous allez configurer votre importation. Vous pouvez choisir les différents styles dont vous avez besoin et que vous désirez importer. Par exemple si vous avez besoin de cette police en gras et en italique... ou pas !



Si vous descendez un peu, vous pouvez apercevoir... des codes !
Il s'agit des codes que vous pouvez utiliser en fonction de la méthode par laquelle vous souhaitez implémenter votre police (standard, via @import ou par javascript).



Ne vous tracassez pas, nous allons choisir la méthode "Standard".

3ème étape : implémenter

Techniquement, vous êtes déjà sur l'onglet "Standard".

Copiez simplement le code qui correspond à un code HTML et conservez-le dans un bloc-note.
Cette balise <link> peut servir à lier à votre site ou forum toutes sortes de fichiers, en l'occurence ici une ou plusieurs polices. C'est aussi avec une balise link qu'on lie un fichier .css à un site. C'est donc cette balise qui va nous permettre d'intégrer le code dans votre forum.

Ce doit être quelque chose comme cela :

Code:

<link href='http://fonts.googleapis.com/css?family=XXX' rel='stylesheet' type='text/css'>

Descendez encore un peu sur votre page, nous trouvons un code CSS : copiez-le aussi et mettez-le sur votre bloc-note. Ce doit être un code comme cela :

Code:

font-family: 'XXX', serif;

Ne perdez rien surtout !
Nous allons désormais retourner sur votre forum pour mettre tout ceci en place.

Sur votre forum

Le HTML, dans le template

Rendez-vous sur votre Panneau d'Administration, cliquez sur l'onglet Affichage puis dans le menu Templates » Général et cliquez sur overall_header pour l'éditer.

L'endroit où vous allez positionner votre balise link pourrait avoir un impact sur l'affichage de votre police. Si vous le mettez après l'insertion du lien vers votre feuille de style, votre police ne s'affichera pas forcément.

Repérez donc cette partie du code, tout au dessus du code :

Code:

<meta http-equiv="content-style-type" content="text/css" />

Et copiez en dessous de cette balise meta votre balise <link>, comme sur l'aperçu ci-dessous :


Techniquement, il s'agit ni plus ni moins d'une feuille de style CSS qui définit l'emplacement et le nom de la police qui vous intéresse, que Google héberge pour vous à l'URL http://fonts.googleapis.com/css?family=XXX.

Validez et n'oubliez pas de publier votre template !

Le CSS, dans le CSS

Puis rendez-vous dans Affichage > Couleurs > Feuille de style CSS.
Il ne vous reste plus qu'à appliquer la police au sélecteur de votre choix... Moi j'ai décidé de l'appliquer à tous mes titres les plus importants <h1> par exemple :

Code:

h1 {
    font-family: 'XXX', serif;
}

Mais on aurait pu tout aussi bien appliquer la police à l'ensemble du forum :

Code:

body {
    font-family: 'XXX', serif;
}

Bref, c'est super-simple, super-efficace et vous n'avez rien de plus à faire qu'à utiliser la police hébergée avec les codes fournis par l'API Google.

Enregistrez vous avez fini !