Utilisation d'une police Google Fonts pour la ChatBox... ?

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

Résolu Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 20 Oct 2015 - 18:52

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir !

J'ai récemment pu installer une police Google Fonts sur mon forum (en l'occurrence Roboto Slab), grâce aux explications disponibles sur ce forum, donc dans le template overall_header juste après la première balise head. Elle s'affiche parfaitement sur la page d'accueil et dans les messages postés, mais la ChatBox reste entièrement en Times New Roman là où j'aimerais qu'elle s'accorde avec le reste. Les petits bouts de code que j'ai pu trouver ici n'ont, il me semble, rien changé à cela. Auriez-vous un code à me proposer, ou est-il impossible d'afficher dans la ChatBox une police non présente au départ sur le forum ?

Merci d'avance de votre aide !


Dernière édition par Zacharias Sattler le Mar 27 Oct 2015 - 18:11, édité 1 fois

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Feuilla' le Mar 20 Oct 2015 - 19:21

Bonsoir,
après avoir mis en place l' Astuce http://forum.forumactif.com/t343855-utiliser-des-polices-personnalisees-avec-google-web-fonts, mettez le code comme indiqué dans le CSS (la localisation de la Feuille de style CSS se trouve dans l'astuce Wink )
et mettez à la place de "element" ".chatbox_row_2" qui donne
Code:
.chatbox_row_2 {font-family:"Grand Hotel";}
résolu http://forum.forumactif.com/t328403-comment-changer-la-police-de-la-chatbox#2835086
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 20 Oct 2015 - 19:32

Bonsoir, merci pour votre réponse si rapide !

Cependant, la ChatBox est toujours dans son état initial après avoir rajouté ce code (avec le nom de ma police, évidemment). Voilà un screen du code :

http://image.noelshack.com/fichiers/2015/43/1445362300-capture2.png

D'où peut venir le problème ?

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Feuilla' le Mar 20 Oct 2015 - 19:38

Re,
dans le message d'Automne il y a un espace (entre les deux points "font-family" et les guillemets). Le problème vient peut-être de là. Wink
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 20 Oct 2015 - 20:02

Après essai avec un espace comme dit, puis avec d'autres entre les accolades et le reste, cela ne marche malheureusement toujours pas... de même sans les guillemets ou avec des guillemets simples. ;m;

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Feuilla' le Mar 20 Oct 2015 - 20:06

Re,
oui il faut garder les guillemets. Smile
Comme dit dans le lien, d'ailleurs n'avez pas oublié de commencer d'abord par ici ? Wink
Astuce http://forum.forumactif.com/t343855-utiliser-des-polices-personnalisees-avec-google-web-fonts
Et ensuite vous pourrez changer la police. Smile
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 20 Oct 2015 - 20:10

Re,
Etant sous phpbb2, j'ai utilisé la première méthode, c'est-à-dire que j'ai copié le bout de code donné sur Google fonts dans le template overall_header. Y a-t-il une étape avant que j'aurais oubliée ?

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Feuilla' le Mar 20 Oct 2015 - 20:16

Re,
normalement non, peut-être avez-vous mal enregistré le template ?
Car après :enreg: il faut aussi en plus publier le template avec ajout .

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 20 Oct 2015 - 20:18

Re,
Je viens de vérifier et oui, il est bien publié. ... preuve en est que la police marche sur tout le forum, sauf la ChatBox, qui reste réfractaire.

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Lun 26 Oct 2015 - 14:38

Up, anyone ? o/

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par kiwi14637 le Lun 26 Oct 2015 - 15:09

Bonjour,

Votre chatbox est dans un nouvel onglet ?

Bonne journée !

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Lun 26 Oct 2015 - 16:13

Bonjour ! o/
J'utilise régulièrement la CB dans un nouvel onglet, mais le problème est également présent en la gardant sur la page d'accueil.

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par kiwi14637 le Mar 27 Oct 2015 - 13:30

Bonjour,

Les templates et javascripts ne s'appliquent pas à la chatbox quand elle est dans un onglet.
Une solution toute bête et non mentionnée dans le tutoriel serait d'utiliser @font-face pour déclarer la police comme ça, vous pourrez l'utiliser normalement.
Donc, vous laissez vos modifications mais avant
Code:
.chatbox_row_2 {font-family:"GrandHotel";}
, vous rajoutez
Code:
@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /* IE9 Compat Modes */
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff') format('woff'), /* Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
   }
(code pris d'ici http://blog.fontspring.com/2011/04/best-practices-for-Servimg-webfonts-to-ie9/)
Remplacez MyWebFont par GrandHotel par exemple et remplacez webfont.eot, svg ... par les liens de votre police (si trop compliqué, utilisez ce code pas forcément compatible avec tous les navigateurs
Code:
@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.woff');
   }
)

Bonne journée !

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 27 Oct 2015 - 16:31

Bonjour,
J'ai tenté d'appliquer les codes avec le seul lien de police que j'aie, qui est le suivant : « https://fonts.googleapis.com/css?family=Roboto+Slab:300,700 » Mais avec ou sans les extensions, cela ne fonctionne pas, et pire encore, la police ne fonctionne plus sur le reste des pages. Que faire ?

Bonne journée !

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par kiwi14637 le Mar 27 Oct 2015 - 17:28

Essayez ceci :
Code:
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37Zo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
}

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par Zacharias Sattler le Mar 27 Oct 2015 - 18:11

Haaaa, merci infiniment, ce code fonctionne très bien et même lorsque la ChatBox est ouverte dans un nouvel onglet ! \o/

Je vais passer le sujet en résolu, mais pensez-vous pouvoir m'expliquer d'où vient le lien fonts.gstatic.com afin que je puisse reproduire cette technique sur d'autres forums ? Merci encore !

Zacharias Sattler
Nouveau membre

Messages : 9
Inscrit(e) le : 20/10/2015

http://the4thwall.forumactif.org
Zacharias Sattler a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Utilisation d'une police Google Fonts pour la ChatBox... ?

Message par kiwi14637 le Mar 27 Oct 2015 - 19:12

Ouvrez le lien https://fonts.googleapis.com/css?family=Roboto+Slab:300,700

Bonne soirée ! Smile

PS : Le code ne marchera pas sur IE sans faire de petites modifications.

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 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