Custom Fonts
Um deinem Design einen individuellen Stil zu verpassen, kannst du Adobe Fonts und Custom Fonts (also selbst hochgeladene Schriftarten) einbinden.
Adobe Fonts einbinden
Schritt 1: Installiere die Custom Fonts App
Dadurch erhältst du einen Font-Reiter in den Theme-Einstellungen sowie eine eigene Kategorie in dem Auswahlfeld der Schriftarten.
Schritt 2: Navigiere in die Theme-Einstellungen
Navigiere zu Design > Webseite und klicke auf das Zahnrad-Icon:
Klicke danach auf “Fonts”:
Schritt 3: Suche die gewünschte Schriftart heraus
Öffne einen neuen Tab, gehe zu Adobe Fonts und suche dir eine Schriftart aus, die dir gefällt.
Erstelle dann ein neues Webprojekt daraus. Achte dabei darauf, so wenig Stile wie möglich zu aktivieren, um die Ladezeit deiner Webseite nicht zu verlangsamen. Wie das alles genau geht erährst du hier.
Kopiere abschließend die ID deines Webprojekts:
Schritt 4: Füge die ID unter “Adobe Fonts” ein
Schritt 5: Füge die Schriftart unter “Manuelle Schriften” hinzu
Kopiere den Namen am besten aus Adobe Fonts und füge diesen in das Eingabefeld ein:
Der Name muss identisch sein:
Bestätige abschließend mit “Speichern”. Danach ist die Adobe Font hinterlegt.
Schritt 6: Wähle die Adobe Font aus
Navigiere abschließend in den Designer und wähle die gewünschte Schriftart aus:
Custom Fonts einbinden
Wenn du eine eigene Schriftart als Datei hast (z.B. von dafont.com), kannst du diese ebenfalls einbinden.
Wichtig ist, dass die Datei im .ttf-Format (TrueType Font) oder .woff-Format (Web Open Font) vorhanden ist:
Schritt 1: Installiere die Custom Fonts App
Dadurch erhältst du einen Font-Reiter in den Theme-Einstellungen sowie eine eigene Kategorie in dem Auswahlfeld der Schriftarten.
Schritt 2: Lade die Font unter Medien hoch
Navigiere zu Content > Medien und lade die Datei hoch, indem du auf das Plus-Icon klickst und die Datei auswählst:
Öffne danach die Medien-Details, indem du auf die Datei klickst:
Dort findest du die URL der Datei bzw. der Schriftart. Kopiere diese:
Schritt 3: Navigiere in die Theme-Einstellungen
Navigiere zu Design > Designs und klicke auf das Zahnrad-Icon:
Klicke danach auf “Erweitert” und “CSS bearbeiten”:
Schritt 4: Füge die Schriftart ins CSS ein
Kopiere jetzt folgenden Code, füge ihn dort ein und ändere die großgeschriebenen Platzhalter:
Hier mal ein Beispiel:
Das würde dann so aussehen:
Bestätige danach mit „Speichern“.
Schritt 5: Füge die Schriftart unter “Manuelle Schriften” hinzu
Klicke danach in den Theme-Einstellungen auf “Fonts” und füge die Schriftart unter “Manuelle Schriftarten” hinzu:
Achte dabei darauf, dass der Name der Schriftart genau geschrieben wird (in diesem Fall mit Unterstrich).
Bestätige abschließend mit “Speichern”. Danach ist die Custom Font hinterlegt.
Schritt 6: Wähle die Custom Font aus
Navigiere abschließend in den Designer und wähle die gewünschte Schriftart aus:
