Eigene Schriftarten verwenden

Jedes Unternehmen hat seine eigenen Schriften, die es auf Basis seines Corporate Designs verwendet. Aus diesem Grund werden in unserem Theme keine Schriftarten mitgeliefert. Es ist jedoch einfach möglich, Google Webfonts oder auch andere Webfonts DSVGO-konform in Shopware 6 zu nutzen. Wie dies funktioniert, haben wir dir nachfolgend beschrieben.

Schriftarten hochladen

Lade den Schriftenordner in den Ordner /public/fonts/ in deiner Shopware Installation. Wenn der Ordner /fonts/ noch nicht existiert, dann erstelle diesen. Im folgenden Beispiel wurde der Schriftenordner Roboto hochgeladen, welcher die Schriftdateien enthält.

Schriftarten per @font-face initialisieren

Gehe nun im Administrationsbereich deines Shopware 6 Shops zu Inhalte -> Themes und wähle das Theme „Superior PRO Theme“ aus. Wechsle in den Tab Custom Code </> und füge im Bereich CSS Code den CSS Code für die Schriftart ein.

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Roboto/roboto-v30-latin-regular.woff2') format('woff2'),
       url('/fonts/Roboto/roboto-v30-latin-regular.ttf') format(‚truetype');
}

Danach kannst du im Tab Typografie die Schriftart „Roboto“ verwenden.

Nützliches Tool für Google Webfonts

Um Google Webfonts downzuloaden und gleichzeitig den nötigen CSS Code zur Einbindung zu erhalten, gibt es folgendes nützliches Tool. Besuchen Sie dazu folgende Website:

google webfonts helper

1. Suche dir die gewünschte Schriftart über das Suchfeld und wähle diese danach aus.

2. Setze das Häkchen bei allen gewünschten Schriftstärken, wie z.B. 300, regular, 700, ...

3. Passe den Pfad zum Schriftenordner wie folgt an: /fonts/[ORDNERNAME]/

4. Lade dir die Schriften herunter um sie danach, wie oben beschrieben, in den /public/fonts/ Ordner hochzuladen.

5. Kopiere den CSS Code für die Schriftart und füge ihn wie oben beschrieben im Thememanager ein.