Zum Inhalt

Zuweisungsregeln

Schrift hochgeladen + zugewiesen = sie wirkt im Storefront. Die Zuweisungs-Regel sagt, wo die Schrift greift.

Einfachste Form: „Alles"

Schrift öffnen → „Zuweisung hinzufügen" → CSS-Selektor body.

Damit gilt:

body { font-family: "Acme Sans Pro", sans-serif; }

Effekt: die komplette Storefront benutzt diese Schrift.

Spezifischere Selektoren

Manchmal willst Du nur einen Teil:

Selektor Effekt
h1, h2, h3, h4, h5, h6 Nur Überschriften
.product-name Nur Produktnamen in Cards/Detail
.btn Nur Buttons
body, button, input Body + Formulare

Beim Eingeben des Selektors validiert das Plugin die Syntax (keine kaputten CSS-Regeln).

Pro Sales-Channel

Bei Multi-Sales-Channel-Setup:

  • Zuweisung „nur für Channel A" – Schrift greift nur dort
  • Zuweisung „für alle Channels" – Default
  • Zuweisung „für mehrere ausgewählte Channels" – Multi-Select

Pro Media-Query (Responsive)

Für unterschiedliche Schriften auf Mobile vs. Desktop:

  • Im Zuweisungs-Detail: Media-Query Feld
  • z.B. (max-width: 767px) – nur Mobile
  • z.B. (min-width: 1200px) – nur Large Desktop

Mehrere Variants kombinieren

Eine Schrift mit Regular, Bold, Italic, Bold-Italic. Der Browser wählt automatisch den richtigen Variant aufgrund von font-weight und font-style in der CSS.

In der Regel reicht eine einzige Zuweisung pro font-family. Der Browser wendet auf jedes <b> oder font-weight: 700 automatisch den Bold-Schnitt an, sofern Du den Variant hochgeladen hast.

Fallback-Stack

Beim Anlegen einer Zuweisung kannst Du die Fallback-Schriften definieren:

Default Empfohlen
serif –
sans-serif für die meisten Use Cases
monospace für Code-Bereiche

Plugin generiert dann:

body { font-family: "Acme Sans Pro", sans-serif; }

Während des Ladens (bis Acme da ist) zeigt der Browser die System-Sans – kein leerer Fallback.

Performance-Tipp: nur essentielle Zuweisungen

Jede Zuweisung erzeugt eine CSS-Regel. Bei sehr vielen Zuweisungen (>20) wird das <head> etwas größer.

Empfehlung:

  • 1–2 Hauptschriften für die ganze Storefront
  • nur dann mehr, wenn ein bestimmtes UI-Element zwingend andere Schrift haben muss

Vorschau im Admin

Beim Anlegen einer Zuweisung zeigt das Plugin eine Live-Vorschau: ein Beispieltext gerendert mit der gewählten Schrift, im gewählten Selektor-Kontext (so gut es geht).

Konflikte mit Theme-Defaults

Wenn Dein Theme bereits ein font-family setzt (z.B. für body), kann es zu Konflikten kommen. Das Plugin:

  1. Erkennt im Storefront-HTML, ob es Theme-Defaults gibt
  2. Warnt im Admin: „Theme setzt body-font auf 'Roboto' – Deine Zuweisung würde das überschreiben"
  3. Bei Konfig „Theme-Default überschreiben = ein" gewinnt das Plugin (mit !important)
  4. Bei aus gewinnt das Theme

Snippet-Vorlagen

Für häufige Use-Cases gibt es Vorlagen:

  • „Headlines nur" – h1, h2, h3, h4, h5, h6
  • „Buttons nur" – .btn, button
  • „Komplette Storefront" – body
  • „Nur Mobile" – Media-Query (max-width: 767px) + Selektor body

Weiter