Eigene Fonts einbinden

In der offiziellen Dokumentation von Shopware ist erklärt, wie du eigene Schriften und Assets in einem Child-Theme oder einer Zusatzerweiterung einbindest. In diesem Beitrag zeige ich dir, wie du die Schriftarten auf deinem Server hinterlegst und unabhängig von Zusatzerweiterungen nutzen kannst.

Schriftarten hochladen

In der Shopware Installation auf deinem Server findest du den Ordner public/fonts. Lege dort deine Schriften ab, die du einbinden möchtest:

In diesem Beispiel habe ich die Schriftart Open Sans eingebunden.

Schrifart per Font-Face initialisieren

In meinen Themes kannst du individuelles CSS einbinden. Das ist notwendig, um die Schrift zu initialisieren. Wo du das CSS einbindest, findest du im folgenden Beitrag:

pageIndividueller Code

Nutze jetzt folgenden CSS Code um deine Schriften zu initialisieren:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Open Sans/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/Open Sans/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Open Sans/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/Open Sans/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Open Sans/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Open Sans/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Beachte, dass der Pfad zu deiner Schrift stimmen muss. Je nachdem, wie du deine Shopware Instanz aufgebaut hast, wird sich der Pfad unterscheiden. In diesem Beispiel habe ich den Standard Pfad zum Fonts Ordner verwendet:

/fonts/DeinFontsOrdner/deineSchrift.ttf

Anschließend kannst du die Schrift ganz einfach in den Theme-Einstellungen nutzen: