Help Center /

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

Fullscreen 18 12 20 11 40

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 > Designs und klicke auf das Zahnrad-Icon:

Fullscreen 19 07 19 09 35

Klicke danach auf “Fonts”:

Fullscreen 19 07 19 09 36

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:

Fullscreen 19 07 19 10 01

Schritt 4: Füge die ID unter “Adobe Fonts” ein

Fullscreen 19 07 19 10 12 1

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:

Fullscreen 19 07 19 10 11

Der Name muss identisch sein:

Fullscreen 19 07 19 10 02

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:

Fullscreen 18 12 20 11 41

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:

Schriftart

Schritt 1: Installiere die Custom Fonts App

Fullscreen 18 12 20 11 40

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:

Fullscreen 19 07 19 11 12

Öffne danach die Medien-Details, indem du auf die Datei klickst:

Fullscreen 19 07 19 11 14

Dort findest du die URL der Datei bzw. der Schriftart. Kopiere diese:

Fullscreen 19 07 19 11 15

Schritt 3: Navigiere in die Theme-Einstellungen

Navigiere zu Design > Designs und klicke auf das Zahnrad-Icon:

Fullscreen 19 07 19 11 16

Klicke danach auf “Erweitert” und “CSS bearbeiten”:

Fullscreen 19 07 19 11 18

Schritt 4: Füge die Schriftart ins CSS ein

Kopiere jetzt folgenden Code, füge ihn dort ein und ändere die großgeschriebenen Platzhalter:

@font-face {font-family: "NAME-DER-SCHRIFTART"; src: url(URL-DER-SCHRIFTART) format('truetype');}

 

Hier mal ein Beispiel:

@font-face {font-family: "The_Wave"; src: url(https://cdn.chimpify.net/573204ed08795611398b45b3/2019/07/The_Wave.ttf) format('truetype');}

 

Das würde dann so aussehen:

Fullscreen 30 09 19 10 26

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:

Fullscreen 30 09 19 10 28

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:

Fullscreen 18 12 20 13 09

Starte heute & gewinne laufend neue Kunden.

Alles, was du brauchst, um digitale Produkte & Dienstleistungen zu vermarkten, zu verkaufen & auszuliefern.
30 Tage kostenlos testen
Keine Kreditkarte erforderlich
Zugriff auf alle Funktionen
Deutscher Support
© Chimpify UG (haftungsbeschränkt)