Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Lexi Help
Schnelle
Hilfe
Klicke Hier
www.forumieren.de

[Tutorial] Google Web-Fonts verwenden 2.0

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Google Web-Fonts verwenden 2.0

Beitrag von Keks am 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)

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.


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.



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)


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
avatar
Keks
Moderator
Moderator

Weiblich Beiträge : 978
Anmeldedatum : 08.08.16
keine
Chrome ModernBB

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


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