Inhaltsverzeichnis

Eigene Schriftarten auf deinen Veranstaltungsseiten

Ingo Updated von Ingo

ACHTUNG: Es muss vorab geklärt sein, ob eine korrekte Lizenz für die Schriftart vorliegt oder ob es sich um eine frei verfügbare Schriftart handelt. Bei Schriftarten - gleich wie bei Bildern - muss das Nutzungsrecht käuflich erworben werden (siehe Artikel von Schriftgestaltung.com). Für den Fall, das es sich nicht um eine frei verfügbare Schriftart handelt, möchten wir dich bitten, uns das Nutzungsrecht schriftlich nachzuweisen!

Um eine neue/noch nicht vorhandene Schriftart in eine Sweap-Webseite einbetten zu können, muss diese zuerst auf einen FTP-Server hochgeladen werden, um sie dann per Befehl (Custom CSS & HTML) abrufen zu können.

HINWEIS: Um eine Schriftart auf den FTP-Server zu laden, sollte diese als .woff oder .woff2 Datei vorliegen. Da dies selten der Fall ist, kann man die Dateien (in der Regel .tif Dateien) mit verschiedensten (kostenlosen) Tools umwandeln. 
1) Umwandlung der Datei(en) - in unserem Beispiel mit dem Tool Transfonter

Hier werden die Dateien im ersten Schritt hochgeladen, um sie dann im zweiten Schritt zu konvertieren.

2) Hochladen der Dateien auf den FTP-Server

Um Dateien auf den FTP-Server zu laden, gibt es zahlreiche Hilfsprogramme die frei aus dem Internet heruntergeladen werden können.

Nachdem Du eine Verbindung (mit dem jeweiligen Tool) zum FTP-Server eingerichtet haben, kannst Du den ZIP-Ordner (der in unserem Fall durch das Tool Transfonter erstellt wurde) entpacken und die betreffende(n) Dateie(n) per drag&drop in die gewünschten Ordner auf dem FTP-Server ziehen und automatisch hochladen.

Im FTP-Ordner ist dann für die weiteren Schritte ausschließlich die Datei "stylesheet.css" für Dich relevant. Per rechtem Mausklick öffnest Du für diese Datei die Internetadresse, um die Informationen für die nachfolgende HTML und CSS Einbindung für den Sweap Webseiten Generator zu erhalten.

Sobald die Internetadresse geöffnet wurde, erhältst Du folgende Ansicht:

font-family: Name der Schriftart

src: url für die Einbindung im Generator

3) Einbindung in den Webseiten Generator

Unter dem Menüpunkt "Custom CSS & JavaScript" kannst Du jetzt den Namen der Schriftart und den Url-Pfad einpflegen, so dass dann vom Generator auf die neue Schriftart zurückgegriffen wird.

Im Bereich "Custom CSS" hinterlegst Du folgenden Code:

body, .map .popover {
 font-family: 'font-family xy', Lato, Helvetica, Arial, sans-serif;

und passen im Bereich "font-family xy" den Namen an. (siehe Markierung)

Danach wechselst Du zum Bereich "Custom HTML im Head" 

<link rel="stylesheet" type="text/css" href="https://
beispiel.com/account/customer/customerOne/font_font-family xy/stylesheet.css">

In den markierten Bereich kopierst Du den Pfad, den Du per "Anzeigen der Internetseite" vom FTP-Server erhalten haben. 

Zum Schluss, speicherst Du bitte alle Änderungen ab.

ACHTUNG: Teilweise kann es vorkommen, das die CSS Fonts anschließend im Webbrowser nicht korrekt geladen werden. Verantwortlich dafür sind hier zumeist sogenannte CORS-Einschränkungen in den Browsern. Mehr zum Thema CORS und wie diese angepasst werden können erfährst Du hier: https://www.hirehop.de/blog/cross-domain-fonts-cors-font-face-issue/

Wie haben wir uns geschlagen?

Einstellungen zu den Registrierungsmöglichkeiten im Webseiten Wizard

Webseiten anpassen mit CSS und Java Script

Kontakt