verstanden

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.

Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung

Twinix Design

Free moziloCMS Layouts

Tutorials Google Fonts

Google Fonts in moziloCMS einbinden

Mit diesem Tutorial zeige ich dir, wie du Schriftarten über die Website Google Webfonts Helper herunterladen, und in dein moziloCMS einbinden kannst.

Solltest du noch keine Schriften haben, hast du mit dem Live Fonts Generator auf twinix.de die Möglichkeit Schriften zu kombinieren und vorher anzuschauen.


Bild "Tutorials:webfonts.jpg"

Den Namen der gewünschten Schriftart geben wir in das Suchfeld ein (Obere linke ecke).

Mit klick auf das Suchergebnis wählen wir die Schrift aus.

Bevor die Schrift heruntergeladen wird, müssen noch drei Einstellungen vorgenommen werden:


  • 1. Select charsets: Für europäische Webseiten können wir den default Wert latin eingestellt lassen.

Bild "Tutorials:char-set.jpg"

  • 2. Select styles: Bei den styles solltest du nur diese wählen die du brauchen wirst.

    meine Empfehlungen:

    • regular: Für „normale“ Texte (Minimum Auswahl)
    • italic: Kursivschrift
    • 700: Für „fette“ Texte
    • 700italic Für „fette“ Kursivschrift

Bild "Tutorials:styles.jpg"

  • 3. Copy CSS: Unter dem Reiter „Best Support“ findest du den CSS-Quellcode, der ganz oben in deine CSS-Datei gehört. Den eingestellten Pfad ../fonts/ (Customize folder prefix (optional):) müssen wir nicht verändern.

Bild "Tutorials:css-styles.jpg"

Nun können wir uns die gewünschte ZIP Datei über den Download-Button herunterladen.


Bild "Tutorials:font-download.jpg"

Fonts hochladen

Wenn noch nicht geschehen, muss der CSS-Code in die style.css deines Layouts eingebunden werden.

Dies kannst du mit einem Editor deiner wahl, oder im Backend deines moziloCMS erledigen.


Bild "Tutorials:mozcss.jpg"

Der Inhalt, der heruntergeladenen ZIP-Datei muss nun per FTP (z.B. FileZilla) auf den eigenen Server geladen werden.

Bild "Tutorials:ordner.jpg"

[Dein mozilo Verzeichnis] --> [layouts] --> [dein layout]

falls das Verzeichnis [fonts] in deinem layout noch nicht vorhanden ist, einfach per rechts klick [Verzeichnis erstellen].


Um deine Schrift zu nutzen musst du sie in deiner style.css dem gewünschten Element zuweisen.


Beispiel:

h1 {
font-family: 'Trirong';
}

Share

Besucher Kommentare

01-Feb-2021
Pia
Danke für diesen sehr hilfreichen Artikel! LG. Pia
28-Nov-2020
Petra Weigert
Danke für deine Mühe, es hat alles super funktioniert. *Daumen hoch*
21-Nov-2020
Thomas Seidel
Eine sehr schöne Anleitung. Ich werde es gleich mal in meinem CMS einsetzen, hört sich gut an.
Neuen Kommentar verfassen
Hinweis: Alle mit einem Sternchen * gekennzeichneten Felder sind Pflichtfelder und müssen ausgefüllt werden.
Name *
Homepage
E-Mail (wird nicht veröffentlicht)
Kommentar *
Spamschutz: Bitte geben Sie das Ergebnis der folgenden Aufgabe ein. *
17 minus 7

Verpasse nichts mehr! und folge moziloCMS