Installer la police google font Roboto Slab

[Kam27]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://tavernanna2.forumactif.com/

Description du problème

Bonsoir,
Récemment j'ai voulu installer la police Roboto Slab sur mon forum mais j'ai l'impression que mon code java ne fonctionne pas.

Code:

WebFontConfig = {
    google: { families: [ 'Roboto+Slab::serif' ] }
  };
  (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);
  })();

Aurais-je fait une erreur ? Pourtant j'ai bien suivi les consignes dans ce topic : https://forum.forumactif.com/t343855-utiliser-des-polices-personnalisees-avec-google-web-fonts

Merci de vos réponses

Bonne soirée

[*Splash*]

Hi,
Pour en bénéficier il faut la rajouter à l'éditeur, tu l'a fait ?

[Kam27]

Je ne compte pas l'installer dans l'éditeur, je veux juste utiliser cette police pour la page css du forum.

[*Splash*]

Dans ta page HTML tu mets ce code:

Code:

WebFontConfig = {
    google: { families: [ 'Roboto+Slab::serif' ] }
  };
  (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);
  })();

Et dans ta CSS celui-ci :

Code:

.element {font-family:"Roboto Slab";}

[Kam27]

Cela ne fonctionne toujours pas, il me met la police Times à la place.
Je pense qu'il y a un problème : google: { families: [ 'Roboto+Slab::serif' ] }
Vu que je suis parvenu à installer la Crinsom text en modifiant cet endroit par 'Crinson Text, serif;', mais je n'y arrive toujours pas avec la Roboto Slab.

[*Splash*]

Sur la page Google Fonts je n'arrive pas à trouver cette référence de police : Roboto+Slab::serif

J'ai tenté en ajoutant ce code après la balise d'ouverture head du template overll_header

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto:700i" rel="stylesheet">

Dans la CSS j'ai ajouté cette ligne

Code:

.element {font-family:"Roboto";}

Et j'ai appliqué cette police au titre du forum

Code:

#site-title h1 {
    font-family:"Roboto";
}

[Adam_sfp]

Je pense qu'il y a un problème :     google: { families: [ 'Roboto+Slab::serif' ] }

Bonjour

Effectivement un soucis dans cette partie

Code:

[ 'Roboto+Slab::serif' ]

Essayez en mettant

Code:

[ 'Roboto+Slab' ]

puis la règle suivante via le CSS en fonction de l'élément concerné

Code:

font-family: 'Roboto Slab', serif;

Cdt.

[Kam27]

Sur la page Google Fonts je n'arrive pas à trouver cette référence de police : Roboto+Slab::serif

J'ai tenté en ajoutant ce code après la balise d'ouverture head du template overll_header

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto:700i" rel="stylesheet">

Dans la CSS j'ai ajouté cette ligne

Code:

.element {font-family:"Roboto";}

Et j'ai appliqué cette police au titre du forum

Code:

#site-title h1 {
    font-family:"Roboto";
}

Je crois que tu confonds la Roboto avec la Roboto Slab qui est une police avec empattement.
Leur nom sont trompeurs mais elles sont très différentes : https://fonts.google.com/specimen/Roboto+Slab

Bonjour

Effectivement un soucis dans cette partie

Code:

[ 'Roboto+Slab::serif' ]

Essayez en mettant

Code:

[ 'Roboto+Slab' ]

puis la règle suivante via le CSS en fonction de l'élément concerné

Code:

font-family: 'Roboto Slab', serif;

Cdt.

J'ai essayé mais le forum me la remplace encore par la Times New Roman. :/

[*Splash*]

Hi,

Au lieu d'utiliser une page HTML, colle cette ligne dans le template, après la balise d'ouverture head :

Code:

 <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

Et à ta CSS tu ajoutes ceci :

Code:

.element {font-family:"Roboto Slab, serif";}

Testé sur un forum en version ModernBB

[Adam_sfp]

J'ai essayé mais le forum me la remplace encore par la Times New Roman. :/

Bonjour

Vous avez mal copié le code (il manque un bout sur la fin) et du coup il ne fonctionne pas...
http://tavernanna2.forumactif.com/99933.js
vous avez mis

Code:

WebFontConfig={google:{families:['Roboto+Slab']}};(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);

en oubliant ce petit bout sur la fin

Code:

 })();

Cdt.

[Lixyr]

Bonjour,

Je poste juste pour signaler qu'il serait plutôt préférable d'installer cette police via le lien CSS plutôt qu'avec du JavaScript, surtout que Google font fait ça bien. Suivez les indications de *Splash* ici et la police sera installée sur votre forum.

(ps : n'oubliez pas de valider la template après modification)

[Kam27]

Vous avez raison, je vais attendre le retour du fondateur (je n'ai pas accès aux templates) vu que le code java ne marche qu'une fois sur deux.
Mais merci Adam_sfp pour le code corrigé.