Schriftarten einbinden

Um deinem Design einen individuellen Stil zu verpassen, kannst du verschiedene Schriftarten einbinden.

Google Fonts einbinden

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

Öffne dann einen neuen Tab, gehe zu Google Fonts und suche dir eine Schriftart aus, die dir gefällt. Kopiere den Namen der Schriftart:

Fullscreen 19 07 19 09 38

Klicke danach unter „Google Fonts“ auf „Hinzufügen“:

Fullscreen 19 07 19 09 37

Es erscheint ein Pop-up. Hier siehst du immer die 25 beliebtesten Schriftarten bei Google Fonts. Gib jetzt den Namen deiner Schriftart ein:

Fullscreen 19 07 19 09 40

Klicke danach auf die Schriftart:

Fullscreen 19 07 19 09 42

Es erscheinen verschiedene Stile. Aktiviere die, die du brauchst. Am besten aktivierst du aber so wenig wie möglich, damit du deine Ladezeit nicht verlangsamst. Bestätige danach mit „Auswählen“:

Fullscreen 19 07 19 09 41

Jetzt ist die Schrift in deinem Design hinterlegt:

Fullscreen 19 07 19 09 47

Navigiere danach wieder in den Designer. Wenn du hier die Schriftartauswahl öffnest, siehst du die neu hinterlegte Schrift und kannst sie auswählen:

Fullscreen 19 07 19 09 44

Adobe Fonts einbinden

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

Öffne dann 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 auch darauf, so wenig Stile wie möglich zu aktivieren, um die Ladezeiten nicht zu verlangsamen. Wie das alles genau geht, erfährst du hier.

Kopiere dann die ID deines Webprojekts:

Fullscreen 19 07 19 10 01

Und füge diese unter „Adobe Typekit“ ein:

Fullscreen 19 07 19 10 12 1

Jetzt musst du die Schriftart noch unter "Manuelle Schriften" hinzufügen. Kopiere daher den Namen aus Adobe Fonts. Dieser muss identisch sein:

Fullscreen 19 07 19 10 02

Füge den Namen danach in das Eingabefeld ein und klicke auf "Hinzufügen":

Fullscreen 19 07 19 10 11

Danach ist die Schriftart dort hinterlegt. Bestätige abschließend mit „Speichern“:

Fullscreen 19 07 19 10 15 1

Jetzt ist deine Adobe Font in deinem Design hinterlegt.

Navigiere danach wieder in den Designer. Wenn du hier die Schriftartauswahl öffnest, siehst du die neu hinterlegte Schrift und kannst sie auswählen:

Fullscreen 19 07 19 10 17

Schriftarten hochladen und einbinden

Wenn du eine Schriftart als Datei hast (z.B. von dafont.com), kannst du diese ebenfalls einbinden.

Die Datei sollte im .ttf-Format (TrueType Font) oder .woff-Format (Web Open Font) vorhanden sein:

Schriftart

Navigiere dann 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

Jetzt musst du die Schrift noch im CSS des Designs integrieren. Navigiere dazu unter Design > Designs und klicke auf das Zahn-Rad-Icon:

Fullscreen 19 07 19 11 16

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

Fullscreen 19 07 19 11 18

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“.

Klicke danach auf "Fonts" und füge die Schriftart unter "Manuelle Schriftarten" hinzu. Achte dabei, dass der Name der Schriftart genau geschrieben wird (in diesem Fall mit Unterstrich):

Fullscreen 30 09 19 10 28

Abschließend kannst du die Schriftart auswählen:

Fullscreen 30 09 19 10 32


© 2017-2019 by Chimpify UG (haftungsbeschränkt)
Powered by Chimpify