Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Gestern um 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )


» Beitrag von Joost in Entdeckt die neue Option Servimg Premium
( 2 )


» Beitrag von T.G. in Zugangsdaten vergessen/verloren
( 1 )


» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )


» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )


[Tutorial] Google Web-Fonts verwenden 2.0

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Tutorial [Tutorial] Google Web-Fonts verwenden 2.0

Beitrag von Keks Fr 9 Jun 2017 - 14:08

Google Web-Fonts verwenden 2.0
[Alle Versionen]
TUTORIAL

Schriftarten die nicht dem Standard entsprechen können etwas optischen "Luxus" ins Forum bringen und Überschriften wunderschön gestalten. Manchmal ist eine andere Schriftart auch etwas worauf das Auge sofort achtet und eine wunderbare Möglichkeit etwas hervorzuheben oder einfach nur hübsch anzusehen.
Dabei sollte aber ein jeder Admin beachten, dass JEDE neue Schriftart, die in das Forum gepflanzt wird, auch dazu führen kann das das eigene Forum länger in der Ladezeit braucht. Ratsam ist es zwei bis drei Schriftarten einzusetzen die sich im "Load Time FAST" bewegen. (Dazu später mehr)

In diesem Beitrag gehe ich nach und nach auf folgende Bereiche ein:
Die Seite von Google Front und das einsetzen in die Templates bzw. dem Forum.

Bevor ich aber nun dazu komme möchte ich eine wichtige Sache ansprechen:
Für das Umsetzen dieses Tutorials ist ein solides CSS-Wissen unverzichtbar um CSS-Einträge zusammenzustellen sowie einzusetzen. Sofern diese Fertigkeit nicht vorhanden ist rate ich demonstrativ davon ab weiter diesem Thema zu folgen und zunächst diese Wissenslücke zu füllen um sich zu einem späteren Zeitpunkt erneut dieser Sache widmen zu können.

Die Seite Google Fonts



Zur Seite (KLICK)
[Tutorial] Google Web-Fonts verwenden 2.0 910
Sobald der Link aufgerufen wird gelangst du auf die "Startseite" (DIRECTORY). Bitte auf dieser bleiben da mehr Informationen zu dieser Seite den Rahmen sprengen.
Wie du nun sehen kannst ist auf der rechten Seite ein "Menü" das dir dabei hilft auf der Seite eine passende Schriftart zu finden ohne stundenlang dich auf der Seite aufzuhalten. Die Haken in der Kategorie können beliebig mit einem Klick entfernt oder wieder gesetzt werden. Die Seite sortiert in: Trendy (Trendy) Popular (Berühmt/ oft genutzt) Date Added (Datum) Alphabetical (alphabetisch) ein jeweiliger Klick auf das kleine Dreieck auf der Seite gewährt die Möglichkeit der Einstellung. Das selbe Prinzip lässt sich bei Languages verfolgen, doch sucht man an dieser Stelle vergebens die deutsche Spracheinstellung. Bei Problemen der Übersetzung empfehle ich daher: Leo.

Wie sicherlich schon aufgefallen ist, ist mein Beispielbild wesentlich schmaler als die Seite selbst. Lenkt aber wunderbar das Auge auf das Wesentliche. Wer die Seite nun seinen Wünschen noch optimaler anpassen möchte kann den Bereich unter: Languages, nutzen und den Punkt auf dem Stich beliebig verschieben zumindest, wenn zuvor der Haken gesetzt wurde.
Sodann sieht man folgendes Resultat: Number of styles (Anzahl der Schriftarten) Thickness (Dicke/ Stärke der Schriftart) Slant (Winkel/ Schräge) Width (Breite). Ich empfehle hier eine persönliche Einstellung nach Geschmack und werde nicht weiter auf die einzelnen Punkte eingehen, sondern nun zu dem wichtigen Schritt kommen, wie eine Schriftart von der Seite zu entnehmen ist.

Auf dem Beispielbild siehst du eine "Raute" darin befindet sich ein "Plus-Zeichen" wie an jeder anderen Schriftart auch. Klicke bitte auf das Plus und du kannst verfolgen wie sich dieses in ein Minus verwandelt und im unteren Bereich des Browsers sich ein "schwarzer Kasten" offenbart.
[Tutorial] Google Web-Fonts verwenden 2.0 911

In dem "Kasten" unten ist an der rechten Seite ein "Minus" bitte darauf klicken und dann öffnet sich der Kasten zu einem "Blatt" wo alles Weitere an Informationen stehen die gebraucht werden.

[Tutorial] Google Web-Fonts verwenden 2.0 912

Zuvor habe ich den Bereich: Load Time, erwähnt und auf diesen möchte ich kurz und verständlich noch einmal eingehen.
Ein wirklich sehr wichtiger Punkt und ich appellieren an jeden Admin sich dies zu Herzen zu nehmen, da es die Ladezeit des Forums beeinflusst.
Denn dieser Punkt zeigt an wie "brauchbar" eine Schriftart ist bzw. wie lange sie selbst zum Laden braucht. Ich habe mir in diesem Beispiel glücklicherweise ein "Fast" Beispiel gewählt. Für alle die mit Englisch nicht allzu viel anfangen können verweise ich noch einmal auf Leo und gebe einen praktischen Tipp mit: Alles was Grün ist, ist gut, was gelb ist stoppt und was rot ist, ist eigentlich kaum zu gebrauchen, sondern würde das Forum zu stark beeinflussen. Ebenso wird die Ladezeit aber auch durch mehrere Schriften beeinflusst, selbst wenn diese alle "Fast" sein sollten kommt doch eine "Masse" zusammen und bekanntlich wiegt die Masse mehr und in diesem Fall beeinflusst sie stark die zusammengerechnete Ladezeit.

Wer nun noch nicht genug gesehen hat und eigentlich mehr Schriften suchen möchte kann an dem Schwarzen Kasten oben rechts auf das "Minus" gehen und der "Kasten" verschiebt sich wieder an den unteren Bereich und alle Schriften die durch ein "Plus" angeklickt werden, werden in dem Kasten gespeichert.

Ich habe mir in dem Beispiel nun zwei weitere Schriften ausgesucht und hinzugefügt. Leider steht nun dort: "Load Time: Moderate " (oranger Hintergrund) und ich denke mir, dass beeinflusst mein Forum doch eher zum Nachteil. (Roter Kasten im kommenden Beispiel Bild)
Also möchte ich die Schriften lieber wieder entfernen. Entweder schließe ich den Kasten nun wieder und gehe auf die "Minus-Zeichen" Und die Schriften entfernen sich automatisch wieder aus dem Kasten oder ich gehe im Kasten direkt auf, dass Minus das neben den Namen der Schriften zu sehen ist. (Pinker Kasten im Beispiel Bild)
[Tutorial] Google Web-Fonts verwenden 2.0 913

Einbinden ins Forum



Für alle die Forenbereiche ansprechen wollen oder die Schrift immer wieder nutzen möchten, empfiehlt sich diese Variante:
Für jede Version wird der obere Teil der "Link" der Schrift in das Template gesteckt um diese Schriftart Global für einige Bereiche anzeigen zu lassen und der untere Teil (steht auch oben drüber: Specify in CSS) in die gewünschte Class oder Id im Css.
Jede Version hat dafür das ein und selbe Template: Allgemeines  Arrow  overall_header
Unter dem Punkt 19 findet ihr diese Variable:
Code:
{CSS}
Genau DARUNTER fügt dann den Link der Schrift ein
Beispiel:
Code:
{CSS}
<link href="https://fonts.googleapis.com/css?family=Modak" rel="stylesheet">

Sodann geht ihr in das CSS und sucht euch die Class heraus, die den Bereich anspricht den ihr mit dieser Schrift verändern möchtet.
Zum Beispiel könnte das dann so aussehen:
Code:
.Classname{font-family: 'Modak', cursive;}
(Die Größe der Schrift und weiteres kann dazu ergänzt werden, dies ist nur ein Beispiel für die Schriftart)

Nur in einem Beitrag:
Nur in einem Beitrag eine andere Schriftart anzeigen zu lassen ist total einfach. Dazu setzt ihr den Link direkt an den Anfang eures Themas (HTML im Beitrag sollte aktiviert sein sowie erlaubt im Forum)
Und dann umschließt ihr den gewünschten Wortlaut einfach mit einem HTML Code.
Beispiel:
Code:
<link href="https://fonts.googleapis.com/css?family=Modak" rel="stylesheet">
<span style="font-family: 'Modak', cursive;">Ich bin ein Beispiel</span>



Abschließend wünsche ich allen Admins viel Spaß mit diesem Tutorial und eine erfolgreiche Umsetzung.

Euer Team von Forumieren king
Keks
Keks
Mod a.D.
Mod a.D.

Weiblich Beiträge : 1394
Anmeldedatum : 08.08.16
keine
Google Chrome phpBB2

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten