Utiliser des polices personnalisées avec Google Fonts

par **Chacha** Ven 4 Jan 2013 - 17:03

Utiliser des polices personnalisées avec Google Fonts

Cette astuce vous permettra d’installer et d’utiliser de nouvelles polices pour vos forums Forumactif.

Pour personnaliser vos forums et éviter les polices standard, il existe la propriété CSS @font-face qui permet d'afficher un texte à tous avec une police hébergée (sans qu'elle doive être installée). Ce tutoriel se concentre uniquement sur Google Fonts, un service dispensé par Google qui met à disposition des moyens d'inclusion de police (sans devoir s'occuper de l'hébergement des polices et des @font-face qui sont gérés par google).

Google Fonts

Le site est très simple d’utilisation et met à disposition plus de 1 300 polices. Cette méthode convient parfaitement aux débutants qui n’auraient pas envie de se casser la tête avec des codes, contrairement à la propriété CSS @font-face (qui elle peut afficher n'importe quelle police).

Pour commencer, parcourez le site ou utilisez la recherche interne pour choisir la police qui vous intéresse. Pour l’exemple, nous allons choisir la police "Grand Hotel". Cliquez sur le bouton "Select this style" en bas à droite.

Voir illustration :

Un menu s'ouvrira à droite, donnant toutes les informations nécessaires à l'installation de la police sur votre forum.

Voir illustration :

Installer la police sur votre forum

Via les templates

	La modification des templates n'est pas une opération à prendre à la légère. Elle requiert, au minimum, de bonnes connaissances du langage HTML. En outre, seul le fondateur du forum est habilité à en modifier les templates.

Citation :: Panneau d'administration  Affichage  Templates  Général, overall_header

Editez le template overall_header en cliquant sur la roue crantée ;
Recherchez la balise HTML <head> ;

Voir illustration :
Copiez le code de la police obtenu sur Google Fonts et collez-le après la balise HTML <head>. Dans notre exemple, nous allons insérez ce code après la balise HTML <head> :

Code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap" rel="stylesheet">

Cliquez sur le bouton :enreg:

afin de sauvegarder les modifications puis sur le bouton Ajout

afin de publier le templates modifié.

Via un code Javascript

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Google Fonts" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:: WebFontConfig = {
google: {
families: ['Nom+de+la+police']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

Dans ce code Javascript, il est nécessaire de remplacer l'élément Nom+de+la+police par le nom de la police. Dans notre exemple, la police s'appelle "Grand Hotel". Il faut donc remplacer l'élément par Grand+Hotel (il faut mettre un + en guise d'espace).

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Utilisation de la police sur votre forum

Une fois l’installation faite, que ce soit depuis les templates ou depuis la gestion des scripts, vous pouvez utiliser votre police n’importe où sur votre forum. Par exemple :

Pour une police sur un élément dans la feuille de style CSS :

Code:

.element {font-family:"Grand Hotel";}
Pour une police dans un message :

Code:

[font=Grand Hotel]Texte de police grand hotel[/font]

Pour une police en HTML :

Code:

<span style="font-family:'Grand Hotel';">Texte</span>

Utiliser des polices personnalisées avec Google Fonts

Vous et Forumactif...

Trucs et astuces