Allgemeine / shopweite Schrifteinstellungen
Schriftart
Hier legst du die globale Schriftart deines Shops fest. Über die CSS-Angabe kannst du beliebige Schriften inkl. Fallback-Schriften hinterlegen.
Standardmäßig setzt Snackys auf System-Schriften, um die bestmögliche Performance zu bieten. Du kannst aber auch problemlos Webfonts in deinen Shop integrieren.
Empfehlung: Lade bei Webfonts idealerweise nur den regulären Schriftschnitt. Weitere Varianten wie fett, kursiv oder leicht kann der Browser häufig automatisch aus der Schrift rendern.
Webfonts selbst hosten
Wenn du Webfonts nutzt, empfiehlt es sich, diese direkt auf deinem Server abzulegen. Lade dazu z. B. den passenden Schriftschnitt bei Google Fonts herunter, lade ihn auf deinen Webserver und binde ihn anschließend über den CSS-Editor im Bereich CSS & HTML ein.
@font-face {
font-family: 'MyWebFont';
src: url('pfadZurSchrift/myfont.woff2') format('woff2');
}Danach kannst du die Schrift im Feld Schriftart verwenden und zusätzlich Fallbacks hinterlegen:
font-family: MyWebFont, Helvetica, Arial, sans-serif;Schriftdicke
Hier bestimmst du die allgemeine Schriftdicke für alle Fließtexte in deinem Shop, z. B. Artikelbeschreibungen. Wir empfehlen die Einstellung Normal. Je nach Brand kann aber auch eine leichtere oder stärkere Schriftdicke besser passen.
Größe (Desktop)
Hier legst du fest, wie groß deine Schrift auf großen Monitoren dargestellt werden soll. Standardmäßig arbeitet Snackys mit rem, du kannst aber auch andere Einheiten wie z. B. px verwenden.
Wenn du weiterhin rem nutzt, ist die Schriftgröße abhängig von der Browser-Grundschriftgröße. Diese liegt standardmäßig bei 16px. Hat ein Besucher seine Browser-Schriftgröße verändert, passt sich dein Shop automatisch an diese Einstellung an.
Größe (Tablet)
Hier bestimmst du die Schriftgröße für kleinere Monitore und Tablets. So kannst du deine Typografie abhängig von der Bildschirmgröße optimieren.
Größe (Mobil)
Hier stellst du ein, wie groß Schriften auf Mobilgeräten dargestellt werden sollen. Etwas kleiner wegen des begrenzten Platzes – oder bewusst größer für bessere Lesbarkeit? Du entscheidest.
Überschriften-Schriftgrößen
Hier kannst du die Schriftgrößen der einzelnen Überschriftentypen individuell anpassen. Wir empfehlen eine logische Abstufung, damit z. B. eine <h3>-Überschrift nicht größer ist als eine <h2>-Überschrift.
Die <h1> ist in der Regel der Seitentitel – auf der Artikelseite entspricht sie dem Artikelnamen. <h4>-Überschriften werden außerdem häufig für Produktnamen in Produktboxen verwendet.
Kleine Texte
Kleine Texte sind Schriftbereiche, die bewusst kleiner als der Standardtext dargestellt werden. Das sind meist zusätzliche Hinweise – z. B. die MwSt.-Ausweisung am Preis oder Copyright-Angaben im Footer.
Große Texte
Große Texte sind alle Inhalte, die größer als der Standardtextfluss dargestellt werden. Dazu gehören z. B. Oberkategorie-Namen in der Kategorienleiste oder Texte mit der CSS-Klasse text-lg.
Tipp: Du kannst einzelne Schriftgrößen auch jederzeit per eigenem CSS definieren. Nutze dafür einfach den CSS-Editor im Tab CSS & HTML.