Typografie

In diesem Abschnitt erfahren Sie, wie Sie die Typografie Ihres Online-Shops anpassen können. Über Google Fonts können Sie aus einer Vielzahl von kostenlosen Schriftarten auswählen.

Sie können auch die Schriftstärke für jedes Element auswählen.Bitte beachten Sie, dass bei einigen Schriftarten möglicherweise NICHT die gewünschte Stärke verfügbar ist. Wenn Sie wissen möchten, ob eine Schriftstärke verfügbar ist, gehen Sie bitte zu Google Fonts. Andernfalls wird sie durch die nächstgelegene verfügbare Stärke ersetzt.

Wenn Sie sich inspirieren lassen möchten, schauen Sie unter https://fontpair.co/ oder https://www.reliablepsd.com/ultimate-google-font-pairings/ nach.

Benutzerdef. Schriftarten

Wenn Sie Ihre eigenen benutzerdefinierten Schriftarten bevorzugen, können Sie diese auch mit wenigen Zeilen benutzerdefinierten Codes importieren. Diese Methode sollte für die meisten Schriftarten funktionieren, aber einige Schriftartenanbieter verwenden möglicherweise alternative Methoden. Bitte beachten Sie, dass Schriftarten für Websites nicht mit Schriftarten für Desktops identisch sind. Wenn Sie Lizenzen für Schriftarten kaufen, erwerben Sie bitte eine Webfont-Lizenz, nicht nur eine Desktop-Lizenz.

Beispiel: So installieren Sie die Schriftart GT America von www.grillitype.com:

1. Laden Sie Ihr Webfont-Kit auf Ihrer Website hoch.
   Gehen Sie hierfür zu Tools > Files > Upload und laden Sie jede angebotene Datei hoch. Typische Webfont-Dateien sollten .eot, .ttf, .woff und .woff2 sein und Sie sollten einen Satz Dateien pro Schriftgröße (z. B. Fett, Mittel oder Hell) und Schriftstil (z. B. Normal oder Kursiv) haben.
   
2. Benutzerdef. CSS zur Website hinzufügen
   Gehen Sie zu Design > Advanced > Custom CSS und fügen Sie die richtige CSS hinzu, um Ihre Webfonts zu importieren. Ihr Schriftarten-Anbieter sollte Ihnen das richtige CSS zur Verfügung stellen, aber Sie sollten Ihren Speicherort für Schriften entsprechend den Dateien aktualisieren, die Sie in Schritt 1 hochgeladen haben.
   
   Wenn ich beispielsweise GT America in normal, kursiv und fett auf Ihrer Website verwenden möchte, verwenden Sie folgenden Code (mit Ihren eigenen URLs):
   

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Regular.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT America';
  font-style: italic;
  src: url('../../fonts/GT-America-Standard-Regular-Italic.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Regular-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Regular-Italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular-Italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT America';
  font-weight: bold;
  src: url('../../fonts/GT-America-Standard-Bold.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

:root {
  --font-heading: 'GT America', Helvetica, Arial, Sans-serif;
  --font-primary: 'GT America', Helvetica, Arial, Sans-serif;
}