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 le Ven 4 Jan 2013 - 17:03

Utiliser des polices personnalisées avec Google Web 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 Web 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 ).

Aucune condition particulière n’est requise pour appliquer ce tutoriel. L’installation de nouvelles polices peut se faire sur toutes les versions de forum (phpBB2, phpBB3, punBB et Invision).

Google Web Fonts :

Le site est très simple d’utilisation et met à disposition plus de 600 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 "Quick use" en bas à droite. Celui-ci vous mène vers une nouvelle page. C’est sur celle-ci que nous allons sélectionner les codes permettant d’installer la police sur un forum.

Plusieurs méthodes d’installation :

1. Si vous avez accès aux templates (compte fondateur), vous pouvez vous faciliter la tâche en utilisant le code standard donné ici :


Copiez ceci :
Code:
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
Rendez-vous dans Panneau d’administration ► Affichage ► Templates ► Général ► overall_header et collez-le entre les balises head (l’ouverture étant à la troisième ligne) :


Exemple :


Une fois le code placé, pensez à enregistrer votre modification et à publier le template afin que celle-ci soit correctement prise en compte sur votre forum.


2. Si vous n’avez pas accès aux templates de votre forum, rassurez-vous, vous pourrez quand même profiter des polices proposées par Google Web Fonts.

Pour cela, cliquez sur l’onglet JavaScript et repérez le code donné :


Copiez-le en retirant les balises javascript (surlignées en rouge sur la capture) :
Code:
WebFontConfig = {
    google: { families: [ 'Grand+Hotel::latin' ] }
  };
  (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);
  })();

Rendez-vous dans Panneau d’administration ► Modules ► HTML & JAVASCRIPT ► Gestion des codes JavaScript. Assurez-vous avant tout que la gestion des scripts soit activée puis cliquez sur "Créer un nouveau javascript" :


Là, donnez un titre à votre script, cochez "Sur toutes les pages", et collez le code donné plus haut :



Utilisation :

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 ( Panneau d’administration ► Affichage ► Couleurs ► Feuille de styles CSS ) :
    Code:
    .element {font-family:"Grand Hotel";}
    Veillez à conserver les guillemets afin que la police soit bien reconnue.

  • 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>




Tutoriels complémentaires
- Les principaux identifiants CSS (phpBB2 & phpBB3)
- Le CSS, comment ça marche ?



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

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

http://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


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