Comment fonctionne Google Web Fonts ?

Tout d'abord, rendez vous sur google web fonts ! C'est cet outil qui va nous servir à générer le code à rajouter dans votre template !


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.

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. Ce n'est pas toujours le cas.



Comme vous pouvez le constater, j'ai sélectionné tous les styles.

vous pouvez descendre dans la page et enfin nous arrivons à la partie qui nous intéresse ! Vous pouvez constater le champ 3 :"Add this code to your website" et le champ 4: "Integrate the fonts into your CSS"



Le champ 3 est une balise link. Copiez son contenu. Cette balise 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.

Partie HTML

Ceci est un exemple, n'oubliez pas de récupérer votre propre code.

Code:

 <link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Gentium+Book+Basic:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Rendez-vous donc sur votre forum dans vos templates.

Affichage > Templates > Overall header

Le template overall header comme vous le savez peut-être, est un template commun à l'ensemble de votre forum puisqu'il s'agit d'une partie essentielle à toute page, l'entête. Il contient également la balise head qui est une balise d'une importance capitale. Elle sert au référencement, elle vous permet d'importer vos fichiers javascript, vos fichiers css, dans les règles du html.

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



Je voudrais ajouter un petit bémol au fait d'ajouter beaucoup de polices : plus vous ajouterez de polices à votre balise, plus le téléchargement sera lourd lors de l'arrivée du membre sur le forum. Essayez donc de vous en tenir à ce dont vous avez besoin. Et supprimez la balise qui contient la police dont vous n'avez plus besoin lorsque vous changez.

Pour le moment, vous n'avez que intégrer votre police, vous ne l'avez pas encore appliquée à un élément de votre page.

Partie CSS

Reprenez donc votre page google web fonts et copiez le champ 4 qui contient la propriété et la valeur pour mettre votre police à un élément.

Rendez-vous dans votre feuille de style.

Affichage > Images et Couleurs > Couleurs > Feuille de style css

Ciblez l'élément sur lequel vous souhaitez appliquer votre police. Exemple : les balises lien : a.

Ceci est un exemple

Code:

 a {
votre code css généré par google web fonts
}

Testez votre code et appréciez ! ^^