[phpBB2] Chatbox Webfont einsetzten

Hallo liebe Community,
Ich habe in meinem Forum die Schriftart geändert und eine Webfont in den Templates eingesetzt. Dafür habe ich diese Anleitung befolgt.
Jetzt ist einigen Mitgliedern allerdings aufgefallen, dass die Schrift nicht in der Chatbox übernommen wurde/wird.

Ich habe daraufhin versucht es eigenständig übers CSS zu ändern, hat aber nicht geklappt, auch diese Anleitung hat bei mir nicht funktioniert.

Ich nehme mal an, dass ich die Verlinkung zu der Schriftart nochmal i.wo in die Templates einsetzten muss. Ich habe es zwar im Adminbereich unter mod_chatbox versucht (einfach in die erste Zeile), nur hilft das auch nicht und jetzt weiß ich nicht weiter.

Das Ende vom Lied: Ich hoffe sehr, dass mir jemand bei diesem Problem helfen kann
Denn nur eine "Halbübernommene" Schriftart sieht im Forum jetzt nicht so dolle aus...

Schonmal vielen Dank für die Hilfe!
Mit freundlichen Grüßen.

Guten Abend SecretWolf,

duerfte ich mal deinen CSS-Eintrag sehen, der den Chatboxtext verändern sollte? (Ich sehe, dass du in deinen Forum für p, td und th eine eigene Schrift gewählt hast, aber diese Änderung betrifft zum Beispiel nicht die Mitgliederauflistung.
Und: Um welchen Text in der Chatbox handelt es sich genau?
Im Grunde kannst du die Schriftart auch im CSS einfügen, damit sie überall installiert wird. Der Nachteil an der Sache ist aber eben, dass es langsamer lädt.

Guten Abend Asciugamano,

Entschuldige die verspätete Antwort, ich fand gestern Abend keine Zeit mehr.
Erstmal noch vielen Dank, dass du dich meinem Problem widmest

Um deine Fragen zu beantworten: Ich hatte vor jeden Text (Titel, Memberaufzählung, Text usw.) anzupassen.
Und meine CSS für die Veränderung der Schriftart sind diese:

Code:


    body.chatbox {
      background-color: #FFE4A1;
    font-family: Handlee;
    }

    #chatbox_members ul {
        font-family: Handlee;
    }

    #chatbox_header .cattitle {
      color: #F24E4B !important;
    font-family: Handlee;
}

    #chatbox_header {
      background-color: #E69A7C;
      height: 30px;
      border-radius: 10px;
      font-family: Handlee;
    }

    #chatbox_main_options a, #chatbox_main_options label {
      color: #F24E4B !important;
      font-family: Handlee;
    }


und diese Beiden weil ich mir nicht sicher war ob diese zusätzlich benötigt werden würden:

Code:

  .chatbox_row_1 {
      color: #E69A7C;
          font-family: Handlee;
    }
 
    .chatbox_row_2 {
      color: #ED6462;
          font-family: Handlee;
    }


Ich hatte schon zuvor einige Änderungen an der Chatbox durchgeführt wie Farbe und derlei. Allerdings bin ich mir nicht so ganz sicher wo genau ich das "font-family" einsetzten muss, vll ist ja da auch der Fehler gewesen, da ich mir nicht 100% sicher war welches ich genau nutzen muss...

mit freundlichen Grüßen

Hallo nochmals,

Probiere es doch bitte mal mit diesem Code hier (ganz unten im CSS einfügen), der sollte all deine gewünschten Stellen ansprechen, damit ich sehen kann, ob es damit funktioniert:

Code:

   #chatbox_header .cattitle, #chatbox_members ul, .chatbox #chatbox p, #chatbox_members .member-title {
  font-family: "Handlee", cursive;
    }

Kleiner Hinweis: Beim Einfügen einer Google-Font muss darauf geachtet werden, dass sie exakt so kopiert wurde, wie sie auch angegeben wurde (also mit den " und dem , cursive, diese dürfen nicht gelöscht werden). Ansonsten wird die Schrift meistens einfach gar nicht angezeigt. Ich denke also, dass es nicht an deiner Installationsart, sondern am CSS selber liegt. Das ist eben der kleine Nachteil an Webfonts, sie lassen einem manchmal etwas weniger Spielraum.

Gute Nacht,
Asciugamano

Guten Abend,

Ich habe den Code soeben eingefügt und gleich mal selbst auf dem Handy nachgeguckt, er scheint wohl nicht zu funktionieren...
Ich lasse ihn mal drin, damit du dich auch selbst davon überzeugen kannst.

Was die Webfonts angeht, das stimmt wohl, dass dies ein Nachteil ist, allerdings habe ich auch überall sonst nur "Handlee" eingesetzt und es funktioniert ja, das verwundert mich eben auch etwas.

Ich wünsche jetzt aber mal eine Gute Nacht,
mit Grüßen
SecretWolf

Und guten Morgen!

Okay, ich verstehe.
Kannst du mal deine Font im CSS einfügen? Das geht mit diesem Code:

Code:

@import url(https://fonts.googleapis.com/css?family=Handlee);

Und dann würde mich noch interessieren: Tritt das Problem bei allen Browsern auf? Ich hatte zum Beispiel mal das Problem, dass einer meiner Browser gewisse Fontdateitypen nicht unterstützte, je nachdem wie sie eingebunden wurden.

Schönen Mittag,

Code ist eingefügt, scheint sich aber nichts geändert zu haben.

Was die Browser angeht gebe ich dir zu späteren Zeitpunkt benötigte Information, da die Schriftart nämlich auf meinem PC installiert ist, wird für mich sowieso alles richtig angezeigt und ich kann es nicht überprüfen (Das hätte ich vielleicht zuvor erwähnen sollen, wie mir gerade einfällt, vll bedeutet das ja auch etwas). Ich werde also entweder mal eben einen anderen PC besorgen oder die Schriftart deinstallieren. Ich melde mich in einigen Minuten zurück.

mit Grüßen

Und hallo nochmals,

ich habe mir das nochmals angesehen und da ist mir noch was aufgefallen, dass ich oben wohl einen kleinen Fehler gemacht habe
Tut mir wirklich leid deswegen, darauf hätte ich vor dem Abschicken achten sollen...

Jedenfalls sollte es so funktionieren:

#chatbox_header .cattitle, #chatbox_members ul, .chatbox #chatbox p, #chatbox_members .member-title {
font-family: 'Handlee', cursive;
}

Also im Grunde anstatt den Gänsefüßchen '.

Wenn die Schriftart auf deinem PC bereits installiert ist, funktioniert bei dir deine bisher angewandte Methode eben auch einwandfrei, weil dein PC die Schrift ja bereits kennt. Wenn du aber die Webfont verwenden möchtest (die ja auch alle anderen sehen sollen), kommt du nicht um den von Google gegebenen Code herum, damit es ordentlich angezeigt wird.

So entschuldigung, die letzten Tage ging gar nichts mehr.

Erstmal: Hallo,
Ich habe mal in der Community nachgefragt und es scheint als würde das Problem mehrere Browser betreffen.
Bzgl des kleinen Fehlers kein Problem, sowas passiert manchmal

Ich habe es nun verbessert eingesetzt allerdings scheint es immernoch nicht zu funktionieren.

Mit freundlichen Grüßen

Hallo SecretWolf!

So, dir auch eine Entschuldigung für die Wartezeit, aber ich wollte dieses Mal auf Nummer sicher gehen. Tatsächlich kann man die Indexchatbox nicht über das mod_chatbox Template manipulieren, weil dieses Template nur die Chatbox auf dem Portal und das Indexmodul der Chatbox anspricht.

Mit diesem CSS-Code erreichst du aber dein gewünschtes Resultat. Einfach  durch das, was ich dir zuvor vorschlug, ersetzen.

Code:

@font-face {
  font-family: 'Handlee';
  font-style: normal;
  font-weight: 400;
  src: local('Handlee Regular'), local('Handlee-Regular'), url(https://fonts.gstatic.com/s/handlee/v5/hN5OFJA7DLALxZ1osZb59Q.woff2) format('woff2');
}
.chatbox * {
  font-family: 'Handlee' !important;
}

Es hat zuvor nicht funktioniert, weil die Schrift mit dem @import-Befehl eingefügt wurde, den forumieren jedoch nicht unterstützt. Wenn du sie jedoch mittels @font-face (Variante 3 in diesem Thread) einfügst, wird es klappen.
Der Stern nach dem .chatbox signalisiert, dass alle Elemente, die in der .chatbox-Klasse enthalten sind, angesprochen werden.

Ich hoffe, ich konnte dir helfen.

Liebe Grüße
Asciugamano

Einen schönen Mittag und etwas verspätete Frohe Weihnachten!

Entschuldige auch meine lange Abwesenheit, jedoch kam ich endlich dazu den Code einzusetzten -Hoffnungsvoll und voller Freude wohl gemerkt. Allerdings hat es sich scheinbar immer noch nicht verändert >.<

Ich hab daraufhin mir nochmal das CSS angesehen und aus deinem Code probeweise überall die ' weggemacht. Denn mir ist aufgefallen dass forumieren das rot anzeigt und ich gleichzeitig im CSS nie ' gebrauche, ich wollte es einfach mal ausprobieren. Farblich passt es sich jtz zwar den anderen Codes an, funktionieren tut es dennoch nicht.

Ich hatte also diesen Code eingefügt:

Code:

   @font-face {
      font-family: Handlee;
      font-style: normal;
      font-weight: 400;
      src: local(Handlee Regular), local(Handlee-Regular), url(https://fonts.gstatic.com/s/handlee/v5/hN5OFJA7DLALxZ1osZb59Q.woff2) format(woff2);
    }
    .chatbox * {
      font-family: Handlee !important;
      }

Ich hab jetzt nochmal deinen Code eingefügrt, damit du es dir selbst ansehen kannst. Ich bin nur gesundheitlich momentan ein wenig angeschlagen weshalb ich nicht allzu lang am PC bleiben kann um an dem Problem zu tüfteln, daher auch die lange Antwortzeit ...

mit besten Grüßen

Hallo SecretWolf,

kannst du mir bitte einmal sagen, welchen Browser du verwendest? Ich habe nämlich gemerkt, dass es auf Firefox zu funktionieren scheint, auf Safari jedoch nicht.
Ausserdem würde ich dich gerne darum bitten, die ' wieder einzusetzen, die sind schon richtig so
Es ist eher so, dass nicht alle Browser die Schriftdateien laden können, ich hatte das Problem auch schon mal auf meiner Webseite und habe sie dann auf eine alternative Weise hochgeladen.

Liebe Grüße

---

EDIT:

Keine Rückmeldung mehr erhalten, das Problem scheint gelöst zu sein. Deshalb wurde hier geschlossen. Sollte es noch Bedarf zu diesem Thema geben, dann bitte eine PN an den unten stehenden EDIT-Absender senden.