Google Fonts importieren

In dieser Anleitung erfährst du, wie du Google Fonts importieren kannst.

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

Schriftart auswählen und konfigurieren

  1. Suche dir einen gewünschten Google Font 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

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.

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.

Screenshots

"Google Fonts"-Konfiguration von ThemeWare®

Hinweis: Weitere Informationen zu "Google Fonts in ThemeWare®" finden Sie im ThemeWare® Handbuch: Google Fonts.


Weiterführende Informationen

Last updated

Was this helpful?