Shopware 6: Eigene Font am Beispiel Open Sans

Um die Schriften DSGVO-konform nicht über den Besucher-Browser von Google Fonts zu laden, binde ich diese lieber lokal ein. Hierzu müssen die Schriftarten im benötigten Dateiformat vorliegen und entsprechend das CSS eingebunden werden.

Das Tool "google-webfonts-helper" bietet mir dabei alles ohne viel Aufwand: https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin

Hier wähle ich die benötigten Zeichensätze (latin) und die Schrift-Stile. Den "Customize folder prefix (optional)" stetze ich auf #{$asset-path}/fonts/open-sans/.

Nun kann ich unter Punkt 4 "Download files" die Dateien herunterladen und nach custom/plugins/CustomTheme/src/Resources/public/fonts/open-sans entpacken.

Stylesheet

Damit alles etwas übersichtlicher bleibt lege ich mir die Datei custom/plugins/CustomTheme/src/Resources/app/storefront/src/scss/fonts/open-sans.scss and und platziere dort den CSS-Inhalt vom Google Webfonts helper. Am Beginn füge ich noch zusätzlich eine Zeile ein über die ich den Assets Path setze:

$asset-path: '#{$sw-asset-theme-url}/bundles/customtheme/' !default;

/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-300italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-regular - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-600italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-700italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-800 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* open-sans-800italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('#{$asset-path}/fonts/open-sans/open-sans-v18-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

In der Datei custom/plugins/CustomTheme/src/Resources/app/storefront/src/scss/base.scss importiere ich dann die Schriftarten:

@import "fonts/open-sans";

Theme-Einstellungen

In den Einstellungen des Verkaufskanals im Reiter "Theme" kommt man mit einem Klick auf "Theme bearbeiten" auf die Theme-Einstellungen. Hier muss dann für "Schriftart Text" und "Schriftart Überschrift" die Schriftart entsprechend gesetzt werden: 'Open Sans', sans-serif;

Assets installieren, Theme kompilieren

Im Anschluss müssen die Assets installiert und das Theme kompiliert sowie der Cache gelöscht werden.

bin/console assets:install
bin/console theme:compile
bin/console cache:clear