Webfonts, Google Fonts oder Typekit einbinden

Für deine Webseite kannst du außer den Standard-Webschriften auch andere Webfonts und Schriftarten nutzen. Wie das funktioniert, möchte ich dir hier erklären.

Achte aber bei dem Einbinden aller Schriften bitte immer darauf, dass die Dateigröße von Fonts meist sehr groß ist und deshalb die Ladezeit deiner Webseite negativ beeinträchtigen kann. Du solltest also wirklich nur die Schriften einbinden, die du wirklich benötigst.

Folgende Möglichkeiten hast du, Webfonts in Chimpify zu nutzen:

Google Fonts

https://fonts.google.com

Für Google Fonts kannst du in den Einstellungen deines Designs oder in den Einstellungen deiner Webseite Fonts von Google hinzufügen.

Gehe hierzu in deinem Design unter Einstellungen auf den Punkt "Fonts". Unter dem Punkt "Google Fonts" klickst du den Button "Hinzufügen" und kannst nun nach Schriften von Google suchen. Wenn du eine Schriftart anklickst, siehst du die möglichen Schriftvarianten und kannst diese auswählen und schliesslich übernehmen.

Für eine bessere Übersicht und Vorschau der einzelnen Schriften kannst du auch die Webseite von Google selbst nutzen (siehe oben).

Typekit

https://typekit.com

Bei Typekit ist es leider technisch nicht möglich, einzelne Schriften einzubinden. Hier musst du dir in deinem Typekit-Account ein sogenanntes Kit erstellen. Diesem kannst du deine benötigen Schriften und Varianten hinzufügen. Die Kit-ID, die du bei Typekit in den Einstellungen des jeweiligen Kits findest, trägst du dann in Chimpify in den Einstellungen deiner Webseite unter "Fonts > Typekit" ein.

Zusätzlich musst du die Schriftart dann ebenso in den Einstellungen unter dem Punkt "Manuelle Schriften" hinzufügen. Welche Zeichenfolge das genau ist, erfährst du in Typekit in deinem Kit und der jeweiligen Schrift unter dem Link "Verwenden von Schriften in CSS" (links oben im Popup).

Beachte: Die Schriftart "sans-serif" brauchst du nicht als Fallback (hinter dem Komma nach der gewählten Schrift aus Typekit) angeben, da diese in Chimpify automatisch hinzugefügt wird.

Webfonts und manuelle Schriften

Wenn du Schriftarten als Datei vorliegen hast, kannst du diese ebenso in Chimpify nutzen. Die Dateien sollten im Truetype-Format (.ttf) oder Web Open Font Format (.woff) sein.

Die Schriftdateien kannst du unter "Content > Medien" hochladen. Die URL zur Schrift findest du, wenn du bei der jeweiligen hochgeladenen Datei (unter "Content > Medien") auf die Datei klickst.

Dann musst du die Schrift noch im Stylesheet / CSS des Designs in den Einstellungen integrieren. Gehe hierzu auf Design > Einstellungen > Erweitert > CSS und gebe dort folgenden angepassten Code ein:

Beispiel für die Einbindung einer Schrift in CSS

@font-face {
font-family: 'MyWebFont';
src: url('https://cdn.chimpify.net/5816c78d199f88e1728fe/2018/03/my-web-font.ttf') format('truetype');
}

Mehr Infos

Mehr Infos zur Einbindung von Schriften in CSS und welche Formate in welchen Browsern funktionieren, erfährst du auf folgenden Seiten:

https://www.w3schools.com/css/css3_fonts.asp
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face

© 2012-2018 by Chimpify UG (haftungsbeschränkt)