# Schriftart- & Designanpassungen

## Schriftarten verwalten

### Schriftart für die Website ändern

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

<figure><img src="/files/Qec7ihk8ehr5bMfJ4uou" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
*Diese Änderung betrifft **nicht** die Schriftart der* [*Navigationslinks in den Menüs*](#schriftart-der-navigationslinks-menus-andern)*.*
{% endhint %}

### 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***

   <div align="left"><figure><img src="/files/e7V3Jvr0C7JY898RgDo5" alt=""><figcaption></figcaption></figure></div>
2. Die Google-Fonts-Adresse in das Textfeld einfügen. Fonts können über [fonts.google.com](https://fonts.google.com/) ausgesucht werden.

   <figure><img src="/files/pdXKURzEoYhQISt2opSO" alt=""><figcaption></figcaption></figure>
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**

   <div align="left"><figure><img src="/files/heT8MAmOzafibuDIJIzA" alt=""><figcaption></figcaption></figure></div>
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

<figure><img src="/files/iNNk00CmMVdobuooWNzz" alt=""><figcaption></figcaption></figure>

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

1. **BEARBEITEN** → **DESIGNMOTIV** → **Website-Einstellungen** → **Code-Injektion**
2. ![\<head>](/files/8ZrsuXYZ0u0gCwJeRibu) auswählen<br>

   <div align="left"><figure><img src="/files/hbPdeRKhfUxFbWc2a0Ui" alt=""><figcaption></figcaption></figure></div>
3. Folgenden Code einfügen (Schriftart nach Bedarf anpassen):

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

4. Änderungen speichern

   <figure><img src="/files/MvZAKbuFj8HFX2axamXd" alt=""><figcaption></figcaption></figure>

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**
* ![\<head>](/files/8ZrsuXYZ0u0gCwJeRibu) auswählen

  <div align="left"><figure><img src="/files/hbPdeRKhfUxFbWc2a0Ui" alt=""><figcaption></figcaption></figure></div>
* Folgenden CSS-Code einfügen (Schriftart nach Bedarf anpassen):

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

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

<figure><img src="/files/B1L2jli33GzvcoHE1Yzv" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helpcenter.etron.info/schnelles-wissen/onlineshop/vorgange-and-anpassungen/schriftart-and-designanpassungen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
