Shopware 6 Shorty | Eigenen Font einbinden

In Zeiten von CDNs und Google Fonts macht sich kaum noch jemand die Mühe Fonts selbst einzubinden. Nach 2-3 längeren ausfällen von Fontawesome und fiesen Latenzen bei Google Fonts gehe ich nun mittlerweile auf Nummer sicher und hoste viele Fonts direkt auf dem Server.

Font Support

Um alle möglichen Devices und Browser zu unterstützen, solltet Ihr die wichtigsten Formate Supporten, mehr dazu HIER.

Shopware unterstützt im Standard nur zwei der gängigsten Font Formate (woff & woff2).

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url('#{$asset-path}/font/Inter-Regular.woff2') format('woff2'),
        url('#{$asset-path}/font/Inter-Regular.woff') format('woff');
}

Wir gehen nicht soweit wie im obigen Artikel und unterstützen bis IE6-8 sondern konzentrieren uns auch auf woff, woff2 und truetype für Safari.

Assets (Bilder, Fonts etc.) einbinden

Hier gibt es leider nicht allzu viel in den Dokus von Shopware zu finden, daher auch dieser Artikel. Wichtig ist, dass wir das ganze in den public Ordner unter Resources packen (custom/plugins/DeinTheme/src/Resources/public).

Diesen Pfad könnt Ihr in eurer entsprechenden .scss Datei wie folgt für euren @font-face auswählen:

@font-face {
    font-family: 'OpenSans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/bundles/deintheme/font/opensans/OpenSans-Regular.woff') format('woff'),
    url('/bundles/deintheme/font/opensans/OpenSans-Regular.woff2') format('woff2'),
    url('/bundles/deintheme/font/opensans/OpenSans-Regular.ttf') format('truetype');
}


# Nur zu Demo, sollte nicht in der gleichen Datei sein
.main-navigation-link{
    font-family: 'OpenSans', sans-serif;
}

danach müsst Ihr noch ./psh.phar storefront:build ausführen, damit die Daten entsprechend ins richtige Verzeichnis geladen werden (DOCROOT/public/bundles/deintheme/font/opensans/***.ttf).

Wichtig: lowercase deinen Pluginnamen -> aus MeinPlugin wird meinplugin

Fazit

Grundsätzlich simpel, wenn es denn dokumentiert ist. Ich hoffe ich konnte dem/der ein oder anderen helfen. Wenn ihr das Hot Reload Modul benutzt, müsst Ihr zwischendrin mal php bin/console assets:install ausführen, die Dateien werden damit nämlich nicht gesynced.

Edit 26.02.2020

Ein cooles Tool für Web habe ich vor kurzem entdeckt:

https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin

Hier bekommt Ihr gleich die @Font Importe generiert und könnt eure entsprechenden Font Formate (normal, italic, bold etc.) auswählen. Ihr müsst hier nur noch den Pfad der src anpassen (../fonts mit /bundles/**** ersetzen).

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