Der Moment ist gekommen: Du öffnest deinen frisch gestalteten Shopware 6 Shop im Browser und stellst fest, dass die Schriftarten nicht so aussehen, wie du sie dir vorgestellt hast. Statt der eleganten Google-Schrift, die du ausgewählt hattest, siehst du die Standard-Systemschrift. Oder schlimmer noch: Du erhältst eine Abmahnung wegen DSGVO-Verstößen, weil deine Shopware Fonts über externe Server geladen werden.
Diese Situation kennen viele Shop-Betreiber. Die gute Nachricht: Mit der richtigen Herangehensweise lässt sich Shopware 6 Font einbinden sowohl technisch elegant als auch rechtlich sicher umsetzen. In diesem Artikel zeigen wir dir Schritt für Schritt, wie du deine Wunsch-Schriftarten durch professionelle Shopware Entwicklung professionell in Shopware 6 integrierst.
Bevor wir in die technischen Details einsteigen, solltest du verstehen, warum eine durchdachte Shopware Schriftart-Integration entscheidend für deinen Shop-Erfolg ist. Schriftarten sind nicht nur ein Design-Element – sie beeinflussen:
Die häufigsten Probleme entstehen, wenn Shop-Betreiber Schriftarten "schnell mal eben" einbinden, ohne die Konsequenzen zu durchdenken. Ein stimmiges Shopware 6 Design erfordert eine lokale Bereitstellung der Assets, um rechtliche Probleme und unnötige Server-Anfragen zu vermeiden.
Für Shopware 6 Fonts stehen dir grundsätzlich drei Integrationswege zur Verfügung:
Der einfachste und performanteste Weg ist die Nutzung von Systemschriften. Diese sind bereits auf den Geräten deiner Besucher installiert und müssen nicht geladen werden.
Vorteile:
Nachteile:
Der klassische Weg über die Google Fonts API ist technisch einfach, bringt aber rechtliche Risiken mit sich.
Vorteile:
Nachteile:
Die Shopware 6 Google Fonts lokal zu hosten ist der Königsweg für professionelle Shops und ein wichtiger Faktor für die technische Shop-Geschwindigkeit.
Vorteile:
Nachteile:
Bevor du mit der eigentlichen Shopware Font einbinden-Prozedur beginnst, musst du ein eigenes Theme erstellen oder ein bestehendes anpassen. Eine DSGVO-konforme Onlineshop-Beratung hilft dir dabei, die richtigen Prioritäten bei der technischen Architektur zu setzen.
Erstelle zunächst die notwendige Verzeichnisstruktur für dein Shopware 6 Custom Font Setup:
CustomTheme/
├── src/
│ └── Resources/
│ ├── app/storefront/src/scss/
│ │ ├── base.scss
│ │ └── fonts/
│ │ └── _custom-fonts.scss
│ └── public/
│ └── fonts/
│ └── [deine-schriftarten]
In der `base.scss` importierst du deine Font-Definitionen:
// Import der benutzerdefinierten Schriftarten
@import "fonts/custom-fonts";
// Weitere Theme-Anpassungen...
Die lokale Integration von Google Fonts Shopware 6 ist der sicherste Weg für rechtskonforme Shops. Hier die detaillierte Anleitung:
Nutze den Google Webfonts Helper (google-webfonts-helper.herokuapp.com), um deine gewünschten Schriftarten herunterzuladen:
Lade die heruntergeladenen Font-Dateien in das Verzeichnis `src/Resources/public/fonts/` deines Themes hoch.
Erstelle in der Datei `_custom-fonts.scss` die @font-face-Regeln. Falls du Unterstützung bei der Shopware 6 Entwicklung benötigst, solltest du auf sauberen Code in der `_custom-fonts.scss` achten:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('#{$sw-asset-public-url}/bundles/customtheme/fonts/roboto-v30-latin-regular.woff2') format('woff2'),
url('#{$sw-asset-public-url}/bundles/customtheme/fonts/roboto-v30-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('#{$sw-asset-public-url}/bundles/customtheme/fonts/roboto-v30-latin-700.woff2') format('woff2'),
url('#{$sw-asset-public-url}/bundles/customtheme/fonts/roboto-v30-latin-700.woff') format('woff');
}
Wichtiger Hinweis: Das `font-display: swap` sorgt dafür, dass zunächst eine Fallback-Schrift angezeigt wird, bis deine Shopware Schriftart geladen ist. Das verbessert die Performance erheblich.
Nachdem du die Schriftarten technisch eingebunden hast, konfigurierst du sie in der Shopware-Administration. Eine gute Typografie zahlt direkt auf die Webseiten-Usability ein, da sie die Lesbarkeit auf allen Endgeräten sicherstellt:
Navigiere zu Inhalte → Themes und wähle dein Theme aus.
Im Bereich "Typografie" findest du die Felder für:
Trage hier deine Shopware Schriftart ändern-Werte ein:
Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Für erweiterte Kontrolle kannst du SCSS-Variablen definieren:
$font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-family-headlines: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
// Anwendung der Variablen
body {
font-family: $font-family-base;
}
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-headlines;
}
Neben klassischen Shopware 6 Google Fonts benötigen viele Shops auch Icon-Fonts wie Font Awesome. Die Integration von Font Awesome Shopware funktioniert ähnlich:
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('#{$sw-asset-public-url}/bundles/customtheme/fonts/fa-regular-400.woff2') format('woff2'),
url('#{$sw-asset-public-url}/bundles/customtheme/fonts/fa-regular-400.woff') format('woff');
}
.fa-regular {
font-family: 'Font Awesome 6 Free';
font-weight: 400;
}
Die Shopware 6 Fonts Performance lässt sich durch verschiedene Techniken optimieren. Schnell ladende Schriften verhindern den "Flash of Unstyled Text" und unterstützen damit indirekt die Conversion-Rate-Optimierung, da der Shop sofort professionell und stabil wirkt.
| Wert | Verhalten | Einsatz |
|---|---|---|
auto |
Browser entscheidet | Standard |
block |
Kurze Blockierung, dann Fallback | Kritische Fonts |
swap |
Sofortiger Fallback | Empfohlen |
fallback |
Sehr kurze Blockierung | Performance-kritisch |
optional |
Nur bei schneller Verfügbarkeit | Nice-to-have Fonts |
Für kritische Schriftarten kannst du Preload-Tags im `` nutzen:
<link rel="preload" href="/bundles/customtheme/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>
Lade nur die Zeichen, die du tatsächlich benötigst:
Mögliche Ursachen:
Lösung:
# Theme neu kompilieren
bin/console theme:compile
bin/console cache:clear
Lösung: Nutze moderne Dateiformate und reduziere die Anzahl der Schriftschnitte:
// Nur notwendige Schriftschnitte laden
@font-face {
font-family: 'CustomFont';
font-weight: 400 700; // Variable Font mit Gewichtsbereich
src: url('custom-font-variable.woff2') format('woff2');
}
Lösung: Migration zu lokalen Fonts oder Systemschriften. Bei Google Fonts:
Für Shop-Betreiber, die von Shopware 5 Google Fonts auf Shopware 6 migrieren, hier die wichtigsten Änderungen:
// Shopware 5 (LESS)
@import url('https://fonts.googleapis.com/css?family=Roboto');
// Shopware 6 (SCSS) - lokale Integration
@font-face {
font-family: 'Roboto';
src: url('#{$sw-asset-public-url}/bundles/theme/fonts/roboto.woff2') format('woff2');
}
Für besonders performance-kritische Shops kannst du Schriftarten je nach Gerät oder Verbindungsgeschwindigkeit laden:
// Nur bei schneller Verbindung Custom Fonts laden
if ('connection' in navigator && navigator.connection.effectiveType === '4g') {
document.documentElement.classList.add('fast-connection');
}
.fast-connection body {
font-family: 'CustomFont', sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
Variable Fonts bieten maximale Flexibilität bei minimaler Dateigröße:
@font-face {
font-family: 'InterVariable';
src: url('inter-variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
h1 {
font-family: 'InterVariable';
font-weight: 800;
font-variation-settings: 'slnt' 0;
}
Wenn deine Shopware Fonts einbinden-Bemühungen nicht funktionieren, arbeite diese Checkliste ab:
Die Integration von Shopware 6 Font einbinden muss nicht kompliziert sein, wenn du systematisch vorgehst. Der Schlüssel liegt in der Balance zwischen Design-Anforderungen, Performance und Rechtssicherheit.
Beginne mit der lokalen Integration deiner wichtigsten Schriftarten, optimiere die Performance durch moderne Dateiformate und font-display-Strategien, und überwache regelmäßig die Ladezeiten. Mit diesem Fundament kannst du später erweiterte Techniken wie Variable Fonts oder Conditional Loading implementieren.
Die Investition in eine professionelle Shopware Schriftart-Integration zahlt sich langfristig aus: durch bessere Performance, höhere Rechtssicherheit und eine stärkere Markenidentität. Deine Kunden werden den Unterschied spüren – auch wenn sie ihn nicht bewusst wahrnehmen.
Vergiss nicht, deine Font-Integration regelmäßig zu überprüfen und bei Theme-Updates entsprechend anzupassen. So stellst du sicher, dass deine Shopware 6 Google Fonts lokal auch in Zukunft zuverlässig funktionieren.