# Google Fonts

ThemeWare® bietet die Möglichkeit Google Fonts über die entsprechende API einzubinden. **Wir empfehlen Google Fonts bezüglich DSGVO aber selber zu hosten** bzw. lokal (auf deinem Webserver) zu hinterlegen und diese von dort zu laden. Dazu hast du verschiedene Möglichkeiten die wir in diesem Artikel erklären.

{% hint style="danger" %}
**Haftungsausschluss**: Die Informationen in diesem Artikel sind allgemeiner Natur und können keine konkrete rechtliche Beratung ersetzen. Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich *Datenschutz-Grundverordnung (DSGVO)* unbedingt rechtlich beraten!
{% endhint %}

{% hint style="info" %}
**Hinweis**: Prüfe deinen Shop stets sorgfältig auf Google Fonts ([Anleitung](https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/website-auf-google-fonts-pruefen)). Diese können auch unabhängig vom verwendeten Theme, beispielsweise durch Plugins oder individuelle Anpassungen importiert werden!
{% endhint %}

## Google Fonts importieren

Für den Import von Schriften über die Google Fonts API gibt es die folgende Konfiguration:

> Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts" => Feld "Google Fonts importieren"

Diese ist von Haus aus deaktiviert, da die Nutzung der Google Fonts API im Hinblick auf die DSGVO nicht empfohlen ist.

Du kannst diese Konfiguration aktivieren, wenn du die Google Fonts API dennoch nutzen möchtest. Möchtest du die Google Fonts API nicht nutzen, stelle sicher, dass diese Konfiguration deaktiviert ist.

Wie du Google Fonts importierst erfährst du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/google-fonts-importieren>" %}
ThemeWare® Wissensdatenbank => Google Fonts importieren
{% endembed %}

## Standard Schriften nutzen

Da die Google Fonts Bibliothek inzwischen mehr als 900 Schriftarten (über 5.000 Schriften) bietet, können wir leider nicht alle Schriften in ThemeWare® integrieren.

Ab ThemeWare® 1.1.7 sind aber alle von ThemeWare® verwendeten Fonts Bestandteil jedes ThemeWare® Themes. Somit stehen dir in jedem Theme 10+1 Schriften zur Verfügung:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th></th></tr></thead><tbody><tr><td><a href="https://fonts.google.com/specimen/Inter">Inter</a> (Standard)</td><td><strong>Schriftart</strong>: <code>'Inter', sans-serif</code></td><td><strong>Strichstärken</strong>: 400, 600, 700</td><td>z.B. ThemeWare® Modern</td></tr><tr><td><a href="https://fonts.google.com/specimen/Englebert">Englebert</a></td><td><strong>Schriftart</strong>: <code>'Englebert', sans-serif</code></td><td><strong>Strichstärke</strong>: 400</td><td>z.B. ThemeWare® Bio</td></tr><tr><td><a href="https://fonts.google.com/specimen/Exo+2">Exo 2</a></td><td><strong>Schriftart</strong>: <code>'Exo 2', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Bike</td></tr><tr><td><a href="https://fonts.google.com/specimen/Montserrat">Montserrat</a></td><td><strong>Schriftart</strong>: <code>'Montserrat', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Clean</td></tr><tr><td><a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a></td><td><strong>Schriftart</strong>: <code>'Open Sans', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Living</td></tr><tr><td><a href="https://fonts.google.com/specimen/Oswald">Oswald</a></td><td><strong>Schriftart</strong>: <code>'Oswald', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Strong</td></tr><tr><td><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></td><td><strong>Schriftart</strong>: <code>'Roboto', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 700</td><td>z.B. ThemeWare® Strong</td></tr><tr><td><a href="https://fonts.google.com/specimen/Roboto+Slab">Roboto Slab</a></td><td><strong>Schriftart</strong>: <code>'Roboto Slab', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Bath</td></tr><tr><td><a href="https://fonts.google.com/specimen/Source+Sans+Pro">Source Sans Pro</a></td><td><strong>Schriftart</strong>: <code>'Source Sans Pro', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 600, 700</td><td>z.B. ThemeWare® Living</td></tr><tr><td><a href="https://fonts.google.com/specimen/Titillium+Web">Titillium Web</a></td><td><strong>Schriftart</strong>: <code>'Titillium Web', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 600, 700</td><td>z.B. ThemeWare® Lights</td></tr><tr><td><a href="https://fonts.google.com/specimen/Ubuntu">Ubuntu</a></td><td><strong>Schriftart</strong>: <code>'Ubuntu', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 700</td><td>z.B. ThemeWare® Outdoor</td></tr><tr><td>Weiter Schriften folgen später...</td><td></td><td></td><td></td></tr></tbody></table>

ThemeWare® überprüft automatisch, ob du in den Konfigurationsfeldern für die Schriftart eine lokal verfügbare "Standard-Schrift" angegeben wurde. Ist das der Fall, wird diese DSGVO-konform direkt von deinem eigenen Server ("lokal") geladen.

Bitte beachte, welche Schriften Bestandteil von ThemeWare® sind (siehe Übersicht oben) und welche Konfigurationswerte du optimalerweise verwendest – zum Beispiel: `'Open Sans', sans-serif`

> ThemeWare® Schriftkonfiguration findest du hier:
>
> * Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften" => Schriftart
> * Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften" => Schriftart

Falls du eine Schriftart angibst, die nicht Bestandteil von ThemeWare® ist und auch nicht manuell eingebunden wurde, verwendet der Browser stattdessen eine sogenannte "Fallback-Schrift" – das ist eine Systemschrift, die lokal auf dem Gerät des Besuchers verfügbar ist (z. B. Arial, Helvetica oder Times New Roman).

## Schriften selber hosten bzw. lokal installieren

Wie du beliebige oder eigene Schriftarten mit ThemeWare® lokal einbindest, erfährst du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts>" %}
ThemeWare® Wissensdatenbank => Fonts bzw. Schriften
{% endembed %}

## Storefront auf Google Fonts prüfen

Auch eine Anleitung zur Prüfung deiner Storefront auf externe Google Fonts findest du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/website-auf-google-fonts-pruefen>" %}
ThemeWare® Wissensdatenbank ⇒ Shop auf Google Fonts prüfen
{% endembed %}

#### Weiterführende Informationen

* Einführung: [Schriften konfigurieren](https://wiki.themeware.design/wissensdatenbank/einfuehrung/schriften-konfigurieren)
* Anleitung: [Fonts lokal einbinden](https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/fonts-lokal-einbinden)
* Anleitung: [Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden](https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/fonts-mit-dem-themeware-customizing-plugin-lokal-einbinden)
* Anleitung: [Website auf Google Fonts prüfen](https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/website-auf-google-fonts-pruefen)


---

# 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://doku.themeware.design/mehr-wissen/google-fonts.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.