LogoLogo
SucheService PortalWissensdatenbankSonstigesEnglishSupport anfordern
  • Willkommen
  • Elemente in der Storefront
    • Header
    • Footer
    • Kategorieseiten
    • Produktseiten
  • Zusatzfunktionen
    • CMS-Erweiterungen
      • CMS-Blöcke
        • Hero-Slider
          • Hero-Slider (2x)
          • Hero-Slider (3x)
          • Hero-Slider (4x)
        • Teaser
        • Banner
        • Spalten
          • Eine Spalte
          • Zwei Spalten
          • Zwei Spalten (auf Handys getauscht)
          • Zwei Spalten, 3-9
          • Zwei Spalten, 4-8
          • Zwei Spalten, 5-7
          • Zwei Spalten, 7-5
          • Zwei Spalten, 8-4
          • Zwei Spalten, 9-3
          • Drei Spalten
          • Drei Spalten, 2-2-8
          • Drei Spalten, 2-8-2
          • Drei Spalten, 3-3-6
          • Drei Spalten, 3-6-3
          • Drei Spalten, 6-3-3
          • Drei Spalten, 8-2-2
          • Vier Spalten
          • Fünf Spalten
          • Sechs Spalten
          • Sechs Spalten (Individuell)
        • Grids
          • Grid 'Modern'
          • Grid 'Modern' (getauscht)
          • Grid 'One'
          • Grid 'One' (getauscht)
          • Grid 'Two'
          • Grid 'Two' (swapped)
          • Grid 'Three'
          • Grid 'Three' (swapped)
          • Grid 'Four'
          • Grid 'Four' (swapped)
          • Grid 'Five'
          • Grid 'Five' (swapped)
          • Grid 'Six'
          • Grid 'Six' (swapped)
        • Text & Bild
          • Bild & Text überlagernd
        • Kategorieseite
        • Produktseite
          • Produktname (ohne Hersteller-Logo)
          • Galerie und Buybox (mit Produktname)
          • Galerie und Buybox (mit Produktname & Hersteller-Logo)
          • Produktbeschreibung und -bewertungen (Accordion)
        • Sidebar
          • Unterkategorie-Navigation (Sidebar)
        • Sale
          • Hero-Countdown
          • Countdown-Banner
          • Countdown-Banner (kompakt)
          • Discount-Banner
        • Verschiedenes
          • Breadcrumb-Navigation
          • Testimonial (Kundenrezension)
          • Testimonials (Vier Spalten)
          • Individueller Code (HTML/CSS/JS)
      • CMS-Elemente
        • Hero-Slider
          • Call-to-Action-Slide (Hero-Slider)
          • Text-Slide (Hero-Slider)
          • Image-Slide (Hero-Slider)
        • Teaser
          • Text-Teaser
          • Text-Teaser (verziert)
          • Button-Teaser
          • Call-to-Action
          • Hover-Box
          • Image-Teaser
          • Hero-Teaser
          • Advanced-Teaser
          • Classic-Teaser
          • Modern-Teaser
          • Runder Teaser
        • Banner
          • Image-Banner
          • Parallax-Banner
          • Hero-Banner
          • Advanced-Banner
        • Text & Bild
          • Bild & Text überlagernd
        • Kategorieseite
          • Unterkategorien im Listing
          • Unterkategorien im Listing (Modern)
        • Produktseite
          • Galerie (Grid)
          • Produktbeschreibung und -bewertungen (Accordion)
        • Sidebar
          • Unterkategorie-Navigation
        • Sale
          • Hero-Countdown (Überschrift)
          • Countdown-Banner
          • Countdown-Banner (kompakt)
          • Discount-Banner
        • Verschiedenes
          • Breadcrumb-Navigation
          • Testimonial (Kundenrezension)
          • Individueller Code (HTML/CSS/JS)
    • Erweiterungen
      • Ankündigungsbanner
      • Checkout-Steps
      • Erlebniswelt-Header
      • Floating-Widget
      • Hero-Sektion
      • Hersteller in Listings
      • Individuelle Ankündigung
      • Kategorie hervorheben
      • Labels auf Produktseiten
        • Ausverkauft-Label
        • Nicht verfügbar-Label
        • Lagerbestand-Label
        • Lieferzeit-Label
        • Versandkostenfrei-Label
        • Vorbestellung-Label
      • Produkt-Badges
        • Ausverkauft-Badge
        • Lagerbestand-Badge
        • Neu-Badge
        • Rabatt-Badge
        • Topseller-Badge
        • Versandkostenfrei-Badge
      • Produkt-Datenblätter
      • Produkt-Downloads
      • Produkt-Kurzbeschreibung
      • Produkt-Spezifikationen
      • Produktnummer in Listings
      • Produktvideos
      • Quickview
      • Slideout-Communities
      • Social-Media-Links (Icons)
      • Social-Proofing
        • Verkäufe-Infotext
      • Tabs auf Produktseiten
        • Benutzerdefinierter-Tab
        • Datenblätter-Tab
        • Eigenschaften-Tab
        • Hersteller-Tab
        • Videos-Tab
      • Teilen-Links
      • Unterkategorien im Listing
      • USP-Bar
      • Vorteile auf Produktseiten
      • Zahlungsarten auf Produktseiten
    • Grafiken
      • Erlebniswelten
      • Flaggensymbole
      • Social-Icons
      • Versandarten-Logos
      • Zahlungsarten-Logos
    • Widgets
      • Auszeichnungen, Siegel oder Zertifikate
      • Communities bzw. Social Media
      • Footer-Navigation
      • Individueller Text
      • Newsletter
      • Service-Hotline
      • Standort bzw. Ladengeschäft
      • Über uns
      • Versandanbieter-Logos
      • Vorteile
      • Zahlungsanbieter-Logos
      • Zahlungs- und Versandarten
    • Zusatzfelder
      • Kategorien
        • Body-Klasse
        • Erlebniswelt-Header
        • Hero-Sektion
        • Kategorie hervorheben
        • Spalten pro Zeile
        • Unterkategorien im Listing
      • Produkte
        • Allgemein
          • Benutzerdefinierter-Tab – Text
          • Benutzerdefinierter-Tab – Titel
          • Hover-Bild
          • Kommentar
          • Kurzbeschreibung
          • Vorteile
          • Zusatzfeld 1
          • Zusatzfeld 2
          • Zusatzfeld 3
        • Datenblätter
          • Datenblätter (Text)
          • Datenblatt 1
          • Datenblatt 1 – Titel
          • Datenblatt 2
          • Datenblatt 2 – Titel
          • Datenblatt 3
          • Datenblatt 3 – Titel
        • Downloads
          • Download 1
          • Download 1 – Titel
          • Download 1 – Beschreibung
          • Download 2
          • Download 2 – Titel
          • Download 2 – Beschreibung
          • Download 3
          • Download 3 – Titel
          • Download 3 – Beschreibung
        • Videos
          • Produkt-Videos (Text)
          • Video 1
          • Video 1 – Titel
          • Video 2
          • Video 2 – Titel
          • Video 3
          • Video 3 – Titel
          • YouTube-Video(s)
          • Vimeo-Video(s)
        • Weiterführende Links
          • Link 1
          • Link 1 – Titel
          • Link 1 – Link in einem neuen Tab öffne
          • Link 2
          • Link 2 – Titel
          • Link 2 – Link in einem neuen Tab öffne
          • Link 3
          • Link 3 – Titel
          • Link 3 – Link in einem neuen Tab öffne
  • Mehr Wissen
    • Google Fonts
    • JavaScript-Plugins
    • Textbausteine
    • Versandarten
    • Zahlungsarten
  • Konfiguration
    • Layout
      • Hauptfarben
        • Konfiguration
      • Status-Ausgaben
        • Konfiguration
      • Typografie
        • Konfiguration
      • E-Commerce
        • Konfiguration
      • Bilder
        • Konfiguration
      • Layout
        • Konfiguration
      • Buttons
        • Konfiguration
      • Formulare
        • Konfiguration
      • Modals
        • Konfiguration
      • Produkt-Bewertung
        • Konfiguration
      • Tabellen
        • Konfiguration
    • Header
      • Layout
        • Konfiguration
      • Logo
        • Konfiguration
      • Top-Bar
        • Konfiguration
      • Suche
        • Konfiguration
      • Aktions-Buttons
        • Konfiguration
      • Top-Navigation
        • Konfiguration
      • Top-Navigation Flyout
        • Konfiguration
      • Sticky Top-Navigation (Basis-Header "Header 1" und "Header 2")
        • Konfiguration
      • Minimaler Header (im Checkout)
        • Konfiguration
      • Mobiler Header
        • Konfiguration
      • Erlebniswelt-Header
        • Konfiguration
    • Footer
      • Layout
        • Konfiguration
      • Oberer Bereich
        • Konfiguration
      • Mittlerer Bereich
        • Konfiguration
      • Unterer Bereich
        • Konfiguration
      • Inhalte zuweisen und anordnen
        • Konfiguration
      • Minimaler Footer (im Checkout)
        • Konfiguration
      • Logos-Footer
        • Konfiguration
      • Copyright-Footer
        • Konfiguration
    • Inhalt
      • Breadcrumb
        • Konfiguration
      • Cookie-Hinweis
        • Konfiguration
      • Offcanvas-Navigation
        • Konfiguration
      • Paginierung
        • Konfiguration
      • Produkt-Badges
        • Konfiguration
      • Scroll-Up Button
        • Konfiguration
      • Sliders
        • Konfiguration
    • Erlebniswelten
      • Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten)
        • Konfiguration
      • Bild-Slider (Kategorie "Bilder")
        • Konfiguration
      • Galerie (Kategorie "Bilder")
        • Konfiguration
      • Zwei Spalten, zentriertes Bild & Text (Kategorie "Text & Bild")
        • Konfiguration
      • Produkt-Slider (Kategorie "Commerce")
        • Konfiguration
      • Produkt-Filter (Kategorie "Sidebar")
        • Konfiguration
      • Kategorie-Navigation (Kategorie "Sidebar")
        • Konfiguration
    • Kategorieseiten
      • Layout (Layout-Typ "Standard")
        • Konfiguration
      • Layout (Layout-Typ "Großes Bild")
        • Konfiguration
      • Layout (Layout-Typ "Minimaler Inhalt")
        • Konfiguration
      • Produkt-Badges (in der Produkt-Box)
        • Konfiguration
      • Produkt-Box
        • Konfiguration
      • Produkt-Box (Layout-Typ "Standard")
        • Konfiguration
      • Produkt-Box Layout-Typ "Großes Bild")
        • Konfiguration
      • Produkt-Box (Layout-Typ "Minimaler Inhalt")
        • Konfiguration
    • Produktseiten
      • Layout
        • Konfiguration
      • Galerie
        • Konfiguration
      • Buybox
        • Konfiguration
      • Lieferinformationen-Labels (in der Buybox)
        • Konfiguration
      • Produkt-Badges (in der Galerie oder Buybox)
        • Konfiguration
      • Produkt-Spezifikationen (in der Buybox)
        • Konfiguration
      • Produktvideos (in Tabs)
        • Konfiguration
      • Social-Proofing (in der Buybox)
        • Konfiguration
      • Teilen-Links (in der Buybox)
        • Konfiguration
      • Vorteile (in der Buybox)
        • Konfiguration
      • Zahlungsanbieter-Logos (in der Buybox)
        • Konfiguration
      • Tabs
        • Konfiguration
      • Tab "Beschreibung"
        • Konfiguration
      • Tab "Eigenschaften"
        • Konfiguration
      • Tab "Produktvideos"
        • Konfiguration
      • Tab "Datenblätter"
        • Konfiguration
      • Tab "Benutzerdefinierter Inhalt"
        • Konfiguration
      • Tab "Hersteller"
        • Konfiguration
      • Cross-Selling
        • Konfiguration
    • Seiten
      • Allgemein
        • Konfiguration
      • Login
        • Konfiguration
      • Mein Konto
        • Konfiguration
      • Checkout
        • Konfiguration
    • Sidebar
      • Layout
        • Konfiguration
      • Sidebar-Widgets
        • Konfiguration
      • Sidebar-Widgets (Überschriften)
        • Konfiguration
      • Sidebar-Widgets: Inhalte zuweisen und anordnen
        • Konfiguration
    • Widgets
      • Footer-Navigation
        • Konfiguration
      • Auszeichnungen, Siegel oder Zertifikate
        • Konfiguration
      • Vorteile
        • Konfiguration
      • Communities bzw. Social Media
        • Konfiguration
      • Service-Hotline
        • Konfiguration
      • Standort bzw. Ladengeschäft
        • Konfiguration
      • Newsletter
        • Konfiguration
      • Zahlungsanbieter-Logos
        • Konfiguration
      • Versandanbieter-Logos
        • Konfiguration
    • Erweiterungen
      • Ankündigungsbanner (im Header)
        • Konfiguration
      • Checkout-Steps
        • Konfiguration
      • Individuelle Ankündigung (auf Produktseiten und im Checkout)
        • Konfiguration
      • Floating-Widget
        • Konfiguration
      • Hero-Sektion (auf Kategorieseiten)
        • Konfiguration
      • Unterkategorien im Listing (auf Kategorieseiten)
        • Konfiguration
      • Slideout-Communities
        • Konfiguration
      • USP-Bar
        • Konfiguration
    • Weiteres
      • Erweiterte Einstellungen
        • Konfiguration
      • Experten-Einstellungen
        • Konfiguration
      • Kompatibilität (HC-Architecture®)
        • Konfiguration
      • Beta
        • Konfiguration
      • Veraltet
        • Konfiguration
  • Sonstiges
    • Über ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Wissensdatenbank
    • ThemeWare® Video-Tutorial
    • ThemeWare® Utilities
    • 🇬🇧English
Powered by GitBook
LogoLogo

ThemeWare®

  • Über ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informationen

  • Datenschutz
  • Impressum
  • Kontakt
  • Newsletter

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH

On this page
  • Google Fonts importieren
  • Standard Schriften nutzen
  • Schriften selber hosten bzw. lokal installieren
  • Storefront auf Google Fonts prüfen

Was this helpful?

  1. Mehr Wissen

Google Fonts

PreviousLink 3 – Link in einem neuen Tab öffneNextJavaScript-Plugins

Last updated 1 month ago

Was this helpful?

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.

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!

Hinweis: Prüfe deinen Shop stets sorgfältig auf Google Fonts (). Diese können auch unabhängig vom verwendeten Theme, beispielsweise durch Plugins oder individuelle Anpassungen importiert werden!

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:

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:

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:

Storefront auf Google Fonts prüfen

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

Weiterführende Informationen

Einführung:

Anleitung:

Anleitung:

Anleitung:

Schriften konfigurieren
Fonts lokal einbinden
Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden
Website auf Google Fonts prüfen

Schriftart: 'Inter', sans-serif

Strichstärken: 400, 600, 700

z.B. ThemeWare® Modern

Schriftart: 'Englebert', sans-serif

Strichstärke: 400

z.B. ThemeWare® Bio

Schriftart: 'Exo 2', sans-serif

Strichstärken: 300, 400, 500, 600, 700

z.B. ThemeWare® Bike

Schriftart: 'Montserrat', sans-serif

Strichstärken: 300, 400, 500, 600, 700

z.B. ThemeWare® Clean

Schriftart: 'Open Sans', sans-serif

Strichstärken: 300, 400, 500, 600, 700

z.B. ThemeWare® Living

Schriftart: 'Oswald', sans-serif

Strichstärken: 300, 400, 500, 600, 700

z.B. ThemeWare® Strong

Schriftart: 'Roboto', sans-serif

Strichstärken: 300, 400, 500, 700

z.B. ThemeWare® Strong

Schriftart: 'Roboto Slab', sans-serif

Strichstärken: 300, 400, 500, 600, 700

z.B. ThemeWare® Bath

Schriftart: 'Source Sans Pro', sans-serif

Strichstärken: 300, 400, 600, 700

z.B. ThemeWare® Living

Schriftart: 'Titillium Web', sans-serif

Strichstärken: 300, 400, 600, 700

z.B. ThemeWare® Lights

Schriftart: 'Ubuntu', sans-serif

Strichstärken: 300, 400, 500, 700

z.B. ThemeWare® Outdoor

Weiter Schriften folgen später...

Anleitung

(Standard)

Inter
Englebert
Exo 2
Montserrat
Open Sans
Oswald
Roboto
Roboto Slab
Source Sans Pro
Titillium Web
Ubuntu
Google Fonts importieren | ThemeWare® Wissensdatenbank
ThemeWare® Wissensdatenbank => Google Fonts importieren
Logo
FontsThemeWare® Wissensdatenbank
ThemeWare® Wissensdatenbank => Fonts bzw. Schriften
Website auf Google Fonts prüfen | ThemeWare® Wissensdatenbank
ThemeWare® Wissensdatenbank ⇒ Shop auf Google Fonts prüfen
Logo
Logo