Schriftart- & Designanpassungen

Fonts, Google Fonts lokal speichern, CSS-Injection, Code-Injection, Anpassung von Schriftart und Hintergrundfarbe für den Onlineshop

Schriftarten verwalten

Schriftart für die Website ändern

Die Schriftarten der Website können im Website-Editor unter „Designmotiv“ angepasst werden.

Im Menüpunkt Schriftartfamilie stehen folgende Bereiche zur Auswahl:

• Schriftartfamilie: gilt für alle Standardtexte (ohne Überschriften oder Buttons)

• Überschriften: legt die Schriftart für sämtliche Überschriften fest

• Schaltflächen: bestimmt die Schriftart für Buttons

Diese Änderung betrifft nicht die Schriftart der Navigationslinks in den Menüs.

Google Fonts lokal speichern und verwenden

Auf der Website werden aktuell Google Fonts direkt aus der Google Cloud geladen.

Die Umstellung auf lokal gespeicherte Google Fonts erfolgt über die Design-Einstellungen:

1. BEARBEITEN -> DESIGNMOTIV -> Schriftfamilie -> Eine Google Schriftart hinzufügen

   
2. Die Google-Fonts-Adresse in das Textfeld einfügen. Fonts können über fonts.google.com ausgesucht werden.

   
3. Die Option „Schriftart von Google-Servern verwenden“ auf Aus stellen

4. Änderungen speichern

---

Code-Injection für individuelle Anpassungen

Neben den Standardoptionen bietet die Code-Injektion die Möglichkeit, eigene CSS-Regeln einzubinden. So lassen sich gezielt Schriftarten, Farben oder Layouts anpassen.

1. BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion

   
2. Dort den gewünschten CSS-Code hinterlegen

Dies erlaubt eine flexible Anpassung des Designs, ohne externe Abhängigkeiten.

Schriftart der Navigationslinks (Menüs) ändern

Die Schriftart der Website-Navigation kann nur per Code-Injektion angepasst werden:

1. BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion

2. auswählen

   
3. Folgenden Code einfügen (Schriftart nach Bedarf anpassen):

<style>
.nav-link {
    font-family: "meineSchriftart" !important;
}
</style>

1. Änderungen speichern

   

Nach Speichern der Änderung werden die Navigationslinks mit der eingetragenen Schriftart angezeigt.

Hintergrundfarbe ändern

Die Hintergrundfarbe der Produktseite und des Main-Bereichs kann ebenfalls über CSS gesteuert werden:

• BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion

• auswählen

  
• Folgenden CSS-Code einfügen (Schriftart nach Bedarf anpassen):

<style>
main {
    background-color: #d7dec1 !important;
}
</style>

Nach "background-color:" wird die gewünschte Farbe mit dem Hexcode, beginnend mit "#" angegeben.

Nach Speichern der Änderung wird die Produktseite und der Main-Bereich mit der ausgewählten Hintergrundfarbe dargestellt.