Zum Inhalt

Schriften hochladen

So lädst Du eine eigene Schrift hoch und stellst sie im Storefront bereit.

Schritt 1: Schrift-Datei beschaffen

Empfohlenes Format: woff2 (weil klein, modern, sehr gute Browser-Unterstützung). Wenn Du nur ttf/otf hast, kann das Plugin sie nutzen, aber:

  • woff2 ist ca. 30–50% kleiner als ttf/otf
  • Lädt schneller, weniger Bandbreite

Konvertierung ttf/otf → woff2

Kommandozeile (auf macOS/Linux):

# Mit woff2-Tools
woff2_compress meine-schrift.ttf
# → meine-schrift.woff2

Online:

  • transfonter.org (kostenlos, auch für Variable Fonts)
  • everythingfonts.com

Schritt 2: Im Admin hochladen

  1. Kommora → Schriftarten-Manager öffnen
  2. „Neue Schrift hinzufügen" oben rechts
  3. Drag&Drop der Schrift-Datei in den Upload-Bereich – ODER „Datei auswählen"
  4. Plugin erkennt automatisch:
    • Familienname (aus Schrift-Metadaten)
    • Style (Regular, Bold, Italic, …)
    • Format (woff2, woff, …)
    • Gewicht (100–900)

Korrigieren falls nötig:

  • Familienname ist der CSS-font-family-Wert: muss eindeutig pro Familie sein

  • Sub-Familie bei mehreren Schnitten (z.B. Acme Sans Pro – Regular vs. Acme Sans Pro – Bold)

  • Speichern

Schritt 3: Variants hinzufügen

Eine Schrift braucht typischerweise mehrere Files:

Style Gewicht File
Regular 400 acme-regular.woff2
Bold 700 acme-bold.woff2
Italic 400 acme-italic.woff2
Bold-Italic 700 acme-bold-italic.woff2

Im Plugin: Schrift öffnen → „Variant hinzufügen" → Datei hochladen → Style/Gewicht setzen. Wiederholen für jeden Schnitt.

Variable Fonts

Variable Fonts haben alle Gewichte in einer Datei. Beim Upload „Variable Font" markieren, das Plugin erzeugt entsprechende @font-face-Regeln für alle Gewichte zwischen 100 und 900. Spart Bandbreite und HTTP-Requests.

Schritt 4: Vorschau

Im Plugin-Admin pro Schrift eine Live-Vorschau – siehst direkt, wie die Schrift aussieht. Bei mehreren Variants schaltest Du per Tab durch.

Schritt 5: Zuweisung

Schrift hochgeladen reicht noch nicht – Du musst sie auch zuweisen. Siehe Zuweisungsregeln.

Lizenz-Hinweise

Lizenzen prüfen

Beim Hochladen von Schriften musst Du selbst sicherstellen, dass Du die Web-Lizenz für die Schrift hast. Web-Fonts haben andere Lizenzen als Desktop-Fonts – Adobe-Fonts und MyFonts erlauben oft nicht ohne weiteres das selbst-hosten.

Für DSGVO-freundliche Alternativen: Google Fonts lokal hosten oder Open-Source-Alternativen wie Fontsource nutzen.

Lösch- und Ersatz-Workflow

Eine Schrift löschen

  • Im Plugin die Schrift öffnen → „Löschen" rechts oben
  • Plugin warnt, wenn aktive Zuweisungs-Regeln auf die Schrift verweisen
  • Bei Löschung werden auch die Schrift-Files im Media-Verzeichnis entfernt

Eine Schrift ersetzen (z.B. neue Version)

  • Schrift öffnen
  • Variant öffnen → „Datei ersetzen" → neuer Upload
  • Familienname und Zuweisungsregeln bleiben erhalten
  • Browser-Cache der User wird durch automatisch geänderten Hash invalidiert

Verteilung über mehrere Sales-Channels

Beim Erstellen einer Schrift kannst Du:

  • „Allen Sales-Channels zuweisen" – globale Schrift
  • „Spezifische Sales-Channels" – Multi-Select

→ Weiter mit Zuweisungsregeln.