Utiliser des polices personnalisées avec Google Web Fonts

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Utiliser des polices personnalisées avec Google Web Fonts

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

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

  1. Editez le template overall_header en cliquant sur la roue crantée edit ;

  2. Recherchez la balise HTML <head> ;

    Voir illustration :

  3. Copiez le code de la police obtenu sur Google Fonts et collez-le avant la balise HTML <head>. Dans notre exemple, nous allons insérez ce code avant 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


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>


Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 66795
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum