3.1.3 Eigene / weitere Schriftarten

Im RevPlus Theme steht Ihnen leider nur eine begrenzte Auswahl an Schriftarten zur Verfügung. Der Grund: In Deutschland kann die direkte Einbindung von externen Schriftquellen rechtlich problematisch sein – im schlimmsten Fall droht eine Abmahnung für Ihren Shop.

Deshalb verzichten wir bewusst auf Verbindungen zu externen Servern, die uns sonst allerdings auch eine größere Auswahl an Schriften ermöglichen würden.

Wenn Sie eine bestimmte Schriftart nutzen möchten, sprechen Sie uns einfach an! Wir können Ihre Wunsch-Schrift gerne für Sie einrichten. Achten Sie dabei aber bitte darauf, dass die Schrift auch fürs Web lizenziert ist – viele Schriftfamilien dürfen nämlich aus Lizenzgründen nicht online verwendet werden.

Große Auswahl bei Google Fonts

Besuchen Sie den Dienst Google Fonts, um aus einer Vielzahl von Schriftfamilien zu wählen, die in der Regel lizenzfrei und für die Nutzung im Web geeignet sind – so finden Sie ganz einfach eine passende Schrift für Ihren Bedarf.

Eine Schriftart im Child-Theme hinzufügen (Entwickler)

Stöbern Sie durch die Auswahl im Internet oder nutzen Sie Google Fonts, um eine passende Schriftart zu finden. Um die Schriftart für das RevPlus herunterzuladen, eignen sich Tools, wie "Google webfonts helper".

Laden Sie die neue Schriftart im Child-Theme vom RevPlus Profi-Theme in dieses Verzeichnis:

/src/Resources/public/assets/fonts/

Legen Sie hier einen Ordner mit dem Namen der Schriftfamilie an. Wichtig: Der Name des Verzeichnisses sollte in Kebab-Case, also ohne Großbuchstaben und einzelne Wörter mit Bindestrich voneinander getrennt, sein. Legen Sie die Dateien der Schriftfamilie in das neu erstellte Verzeichnis.

Schriftfamilie im SCSS verwenden

/// /src/Resources/app/storefront/scss/overrides.scss

$fz-asset-font-url:  "#{$sw-asset-theme-url}/bundles/fietzrevpluschild/assets/fonts";

$fz-config-font-family-base: 'amatic-sc';
$fz-config-font-family-headline: 'bitter';

$fz-font-family-map: (
    'amatic-sc': "Amatic SC",
    'bitter: "Bitter",
);

Erstellen Sie außerdem neue Dateien, eine jeweils pro neuer Schriftfamilie. Benennen Sie die Datei ebenfalls in der Kebab-Case Syntax - achten Sie hier aber auf den vorangestellten Unterstrich: _.

/// /src/Resources/app/storefront/src/scss/abstract/overrides/font-family/_amatic-sc.scss

$fz-font-face-bundle-url: "#{$fz-asset-font-url}/#{$sw-font-family-base}";

/* amatic-sc-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 300;
    src: url('#{$fz-font-face-bundle-url}/amatic-sc-v24-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('#{$fz-font-face-bundle-url}/amatic-sc-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('#{$fz-font-face-bundle-url}/amatic-sc-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('#{$fz-font-face-bundle-url}/amatic-sc-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('#{$fz-font-face-bundle-url}/amatic-sc-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('#{$fz-font-face-bundle-url}/amatic-sc-v24-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}

/// etc...

/// /src/Resources/app/storefront/src/scss/abstract/overrides/font-family/_bitter.scss

$fz-font-face-bundle-url: "#{$fz-asset-font-url}/#{$sw-font-family-headline}";

/* bitter-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 300;
    src: url('#{$fz-font-face-bundle-url}/bitter-v25-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('#{$fz-font-face-bundle-url}/bitter-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('#{$fz-font-face-bundle-url}/bitter-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('#{$fz-font-face-bundle-url}/bitter-v25-latin-300.woff') format('woff'), /* Modern Browsers */
         url('#{$fz-font-face-bundle-url}/bitter-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('#{$fz-font-face-bundle-url}/bitter-v25-latin-300.svg#Bitter') format('svg'); /* Legacy iOS */
}

/// etc...

Außerdem muss die JSON-Konfiguration des Themes angepasst werden:

/src/Resources/theme.json

{
    ...

    "config": {
        "fields": {
            "sw-font-family-base": {
                "value": "amatic-sc"
            },
            "sw-font-family-headline": {
                "value": "bitter"
            }
        }
    }
}

Damit die neue Schrift nun sichtbar wird und verwendet werden kann, müssen noch die Assets installiert werden und anschließend das Theme neu kompiliert werden. Dies ist auf mehrere Weisen möglich:

Lokal

# Führt alle Schritte zur Darstellung des Storefronts durch
bin/build-storefront.sh

Online (und lokal)

# Kopiert die Schrift-Dateien aus dem Public-Ordner in ein öffentlich zugängliches Verzeichnis
bin/console assets:install

# Kompiliert das SCSS des Themes
bin/console theme:compile

Name, Vorname*

Firma*

E-Mail-Adresse*

Ihre Nachricht an uns*

*Pflichtangaben Bitte beachten Sie unsere Datenschutzrichtlinien.

abschicken

Immo W. Fietz

eCommerce Berater seit 24 Jahren

(0 51 41) 204 892 0¹ support@fietz-medien.de

---

Sie haben noch mehr Fragen? Wir sind auch auf WhatsApp erreichbar!

WhatsApp-Support