# Google Fonts importieren

ThemeWare® bietet dir die Möglichkeit Google Fonts automatisiert zu importieren.

{% 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 %}

## Schriftart auswählen und konfigurieren

1. Suche dir einen gewünschten [Google Font](https://fonts.google.com/) aus
2. Klicke neben einem Style des Fonts auf den Button "**+ Select this style**" (1)
3. Es öffnet sich ein Offcanvas-Element "**Selected family**"
4. Im Bereich "Use on the web" findest du den Abschnitt "**CSS rules to specify families**"
5. Dort steht eine CSS-Anweisung für die gewählte Schriftart (2) (z.B. `font-family: 'Open Sans', sans-serif;`)
6. Wähle die Schriftart und den Fallback-Font aus und kopiere beides in das Konfigurationsfeld für die Schriftart von ThemeWare® (z.B. `'Open Sans', sans-serif`)

Du kannst für den "Text" und die "Überschrift" die selbe Schriftart nutzen. Wenn du verschiedene Schriften nutzen möchtest, wiederhole die Schritte für die andere Schriftart.

#### Screenshots

!["Open Sans" von Steve Matteson auf Google Fonts](/files/XUzD86U4MeWq8Lzpj63l)

## Strichstärke konfigurieren

Du kannst in den Konfigurationsfeldern "Strichstärke für Google Fonts (Text)" bzw. "Strichstärke für Google Fonts (Überschriften)" definieren welche Strichstärken importiert werden sollen. Hier musst du je nach Font prüfen, welche Stichstärken möglich sind.

**Wichtig**: Achte darauf, dass die gewünschten Strichstärken in allen gewählten Fonts zur Verfügung stehen. Möchtest du beispielsweise für "light" die Strichstärke 300 nutzen, dann müssen alle Schriftarten die du importierst die Strichstärke 300 unterstützen.

{% hint style="success" %}
**Tipp**: Passe dahingehend auch die allgemeine Konfiguration für Strichstärken an.
{% endhint %}

## Google Font(s) importieren

Damit die Fonts nun auch importiert werden, bietet ThemeWare® dir die Konfiguration "Google Fonts importieren" im Bereich "Google Fonts". Wähle hier die Option "Ja" aus.

Nun werden die gewünschten Fonts über die Google Fonts API importiert und stehen damit allen Besuchern zur Verfügung.

{% hint style="danger" %}
**Wichtig**: Wir empfehlen dir Google Fonts lokal einzubinden und nicht über die Google Fonts API zu importieren. Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich *Datenschutz-Grundverordnung (DSGVO)* unbedingt rechtlich beraten!
{% endhint %}

#### Screenshots

!["Google Fonts"-Konfiguration von ThemeWare®](/files/P10kBuJh2pTRoj7Tw6E2)

{% hint style="info" %}
**Hinweis**: Weitere Informationen zu "Google Fonts in ThemeWare®" finden Sie im ThemeWare® Handbuch: [Google Fonts](https://doku.themeware.design/mehr-wissen/google-fonts).
{% endhint %}

***

#### Weiterführende Informationen

* Anleitung: [Fonts lokal einbinden](/wissensdatenbank/anleitungen/fonts/fonts-lokal-einbinden.md)
* Anleitung: [Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden](/wissensdatenbank/anleitungen/fonts/fonts-mit-dem-themeware-customizing-plugin-lokal-einbinden.md)


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/google-fonts-importieren.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.