ich bin noch neu in dem ganzen Thema, ich bitte daher um Nachsicht..
Ich habe mich dafür entschieden das kostenlose Theme Ride zu nehmen und es auf meine Wünsche anzupassen.
Nun gibt es in den Theme-Einstellungen unter Typographie zwei Schriftarten zur Auswahl, die unterschiedlich im Theme angewendet werden, “Überschriften” und “Nachrichten”.
Da ich an einigen Stellen des Themes gerne die jeweils andere Schriftart haben möchte, habe ich mich nun einige Stunden durch den Code gewühlt, um den passenden Abschnitt zu finden.
Konkret geht es um die Menüsektion, deren Schriftart ich gerne ändern möchte, also die Sektion “Home, Produkte, News” etc.
@GianlucaP es gibt zwei Wege, Schriftarten zu im Code zu hinterlegen. Je nachdem, wie du Schriften zuweisen willst, gibt es Vor- und Nachteile.
Eigene Schriftarten per CSS einfügen.
Hierbei musst du die Schriftartendatei in dem Code-Editor unter Assets hochladen und in der CSS Datei referenzieren. Danach musst die dann die Werte überschreiben, für die die eigenen Schriftarten angewandt werden sollen. Dieser Weg lohnt sich, wenn du – wie bereits erwähnt – eine eigene Schrift verwenden willst. Die Einstellungsmöglichkeiten sind relativ statisch und für Anpassungen musst du immer in den Code.
Andere (aus der Shopify Auswahl befindliche) Schriftarten anwenden.
Hierfür musst du in der Schema-Datei zunächst definieren, dass es noch ein Schriftauswahlfeld gibt. Diesen gibst du eine passende Bezeichnung, wie „custom_font.family“. Das Ergebnis musst du dann in der CSS-Datei einem Wert zuordnen, wie “–font-custom-family”. Danach musst du die CSS-Elemente suchen, denen du die neue Schriftart zuordnen willst. Diese Variante lohnt sich, wenn du mit bestehenden Schriftarten arbeiten möchtest und die Konfiguration im Theme-Editor vornehmen willst. Das ist allerdings etwas aufwendiger.
In welche Richtung sollte deine Anpassung gehen?
Eigene Schriftart oder bestehende von Shopify verwenden?
Vorerst möchte ich lediglich mit den beiden Schriftarten arbeiten, die in dem Theme Ride unter Theme-Einstellungen → Typografie definiert sind.
Und diese sind definiert als Überschrift (Oswald Medium) und Nachricht (Shadows Into Light), also type_header_font und type_body_font. Die nachträgliche Einstellung der Schriftarten soll über den Reiter Typografie später auch veränderbar bleiben (vielleicht entscheide ich mich irgendwann auch noch einmal für eine andere Schriftart), aber für den Anfang soll es die Shadows Into Light sein.
Und jetzt zum Kern nochmal: Für das Menü wird nun die Scrhiftart Shadows Into Light verwendet
dort möchte ich aber die andere haben, also Oswald Medium. Jetzt habe ich noch wenig weiter geschaut und wenn ich per DevTools auf den Abschnitt gehe folgendes abändere:
“<u1 class=”… auf “<h1” dann bekomme ich auch die Schriftart, die ich dort haben möchte. Ich finde den Abschnitt aber im Shopify-Editor einfach nicht.
EDIT: Hat wohl nichts mit h1 zu tun, aber wenn ich “u1” rausnehme erscheint der Text so wie ich ihn haben möchte.
Das gleiche möchte ich auch pauschal für den Abschnitt “Vorgeschlagenen Kategorie” abändern, dort ist die Überschrift Oswald und die Beschreibung Shadows Into Light. Beide sollen aber Oswald Medium sein.
@GianlucaP alles klar. In diesem Fall kann du in der header.liquid Datei (unter Abschnitte) die Tags mit der CSS-Klasse “header__inline-menu” suchen und denen eine weitere CSS-Klasse zuweisen (bsp. “font-navigation”).
Danach gehst du in die base.css Datei (unter *Assets*) und fügst ganz unten folgenden Teil ein:
```css
.font-navigation {
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-heading-scale));
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
}
Natürlich kannst die Schriftgröße und das letter-spacing beliebig anpassen.
Nach dem Speichern wird die Schriftart der Überschriften auf die Navigation angewandt.
@Finer ich danke dir vielmals für den Lösungsansatz und deine Bemühungen!
Tatsächlich konnte ich das Problem im ersten Versuch jedoch nicht lösen - und habe es danach auch nicht weiter untersucht.
Ich habe mich in der Zwischenzeit auch dazu entschieden, einen Shop bei der Konkurrenz aufzubauen, da die Möglichkeiten der Individualisierung - ohne in den Code gehen zu müssen - deutlich angenehmer sind und ich meine Designvorstellungen wirklich ziemlich gut umsetzen kann. im Augenblick ist es wichtiger für mich, Ergebnisse auf die Beine zu stellen, als den Aufbau des Themes oder Code generell zu verstehen - was sicherlich auch interessant ist, aber dafür habe ich gerade einfach nicht die Zeit.
