Shopware 6 - Docs
  • Shopware 6 - Wissensdatenbank
  • FAQ
    • Support
    • Plugin als Ursache identifizieren
    • SVG Logo wird nicht angezeigt
    • Plugin Speichern - Theme Kompilieren
    • Eigenes CSS
    • Mehrsprachigkeit
  • Lizenzen
    • Umschreiben von Lizenzen
    • Testversion vs Vollversion
  • Themes
    • Theme Doku
    • Theme als Ursache identifizieren
  • Apps / Plugins
    • Conversion Header
      • Mehrsprachigkeit
    • Font Change
      • Lokale Schriften
      • Externe Schriften (Google Fonts)
      • Eigene Schriften
      • Externe Files
      • Generische Schriftfamilie
      • Schriftschnitte
    • Countdown / Notification Banner
      • Close Button einrichten
      • Anpassen der Texte durch Textbausteine
      • Mehrsprachigkeit
    • Payment / Shipping Bar
      • Icon Tooltips einrichten
      • Payment Icons mit Shipping Icons kombinieren
      • Mehrsprachigkeit
    • Individuelle Labels & Badges
      • Verwendung individueller Labels
    • Hersteller im Listing
      • Darstellung CMS Elemente
    • Preloader
    • Mitscrollender Warenkorb
  • Bugs
    • Vererbung Plugin-Konfiguration
    • Mehrsprachigkeit der Plugin-Konfiguration
Powered by GitBook
On this page
  • Schriftart bei Google Fonts aussuchen
  • Schriftart laden
  • Kombinieren von Schriften
  • Gleiche Schriftart für Texte und Überschriften

Was this helpful?

  1. Apps / Plugins
  2. Font Change

Externe Schriften (Google Fonts)

Externe Fonts automatisch einbinden mit Google Fonts Api

PreviousLokale SchriftenNextEigene Schriften

Last updated 2 years ago

Was this helpful?

Nicht immer findet man die Schriftart, die man unbedingt nutzen möchte in der Auswahl der lokalen Schriften. Dann gibt es neben der Einbindung von eigenen Schriften auch die Möglichkeit diese bequem über die Google API extern zu laden. Das ist einfach und geht schnell.

Schriftart bei Google Fonts aussuchen

Besuche nun die Seite von Google Fonts um Dir eine Schriftart auszusuchen, in unserem Beispiel entscheiden wir uns für Rubik:

In der Detailansicht der Schriftart klicke auf einen beliebigen style "+ Select this style". Es erscheint im rechten Bereich die Informationen zur font-family (2).

Du benötigst lediglich den Namen der Schrift - keinen weiteren Code:

'Rubik', sans-serif

Die verfügbaren Schriftschnitte (3) findest Du unter Styles.

Schriftart laden

Schalte zum Laden der Schriften in diesem Bereich den Schalter "Verwende externe Schriften" (1) ein, um die weiter unten konfigurierten Schriften zu laden.

Der Schriftname sollte von Anführungszeichen eingeschlossen werden.

Unter Styles (3) wählst Du die Schriftschnitte aus, die Du in der Storefront nutzen möchtest. Achte darauf, dass mindestens ein Style geladen werden muss.

Um die geladene Schriftart in der Storefront zu nutzen, solltest Du den Schalter Schriftart zuweisen (4) aktivieren, damit die Schriftart beim Kompilieren des Themes mit der Standard Schrift ausgetauscht wird.

Wird der Schalter Schriftart zuweisen (4) nicht aktiviert, wird die Schriftart bereits geladen aber in der Storefront nicht genutzt.

Die Schriftart kann auch manuell in der Theme-Konfiguration im Bereich Typografie eingetragen werden oder mit Hilfe von CSS nur bestimmten Elementen zugewiesen werden.

Verfahre mit der Schriftart für Überschriften auf gleiche Weise.

Kompiliere das Theme damit die Änderungen wirksam werden!

Kombinieren von Schriften

Externe Schriftarten können auch mit lokalen oder eigenen Schriftarten kombiniert werden. So kann beispielsweise eine Schriftart für Überschriften aus dem Portfolio der externen Schriften gewählt werden und gleichzeitig eine Schriftart für Fließtexte aus den eigenen Schriften geladen werden.

Gleiche Schriftart für Texte und Überschriften

Sollen Inhalte und Überschriften die selbe Schriftart verwenden, lege diese einfach für beide Bereiche fest. Wir kümmern uns darum, dass nicht zwei Requests mit der selben Schriftart erzeugt werden.

In das Schriftart Feld (2) der Konfiguration kopierst Du nun den Namen und die : 'Rubik', sans-serif

generische Schriftfamilie
Google FontsGoogle Fonts
Logo