Eigene Schriftart im Sitebuilder verwenden

Es werden Ihnen bereits standardmässig zahlreiche Schriftarten (Fonts) zur Verfügung gestellt. Dennoch möchte man evtl. einen eigenen Font verwenden, insbesondere wenn eine Corporate Identity (CI) für Firmen bereits besteht. Im folgenden finden Sie eine Videoanleitung, wie Sie eigene Fonts in Ihren Sitebuilder einbinden können.

1. Webfonts aus Ihrer Schriftart generieren

• Stellen Sie bitte sicher, dass Sie den Font lizenzrechtlich für kommerzielle / nicht kommerzielle Zwecke verwenden dürfen. Je nach Anbieter sind Fonts kostenpflichtig, manchmal auch für den Eigenbedarf!
• Stellen Sie sicher dass Ihr Font in einem gültigen Format vorliegt (.ttf, .otf, .txt)
• Laden Sie Ihren Font unter www.fontsquirrel.com hoch und folgen Sie der Anleitung unten

2. Font-Dateien in Sitebuilder hochladen

• (00:10) Erstellen Sie unter 'Objekte' einen neuen Ordner 'fonts' und laden Sie Ihre generierten Font-Dateien hoch. Speichern Sie das Theme anschliessend, unter einem Namen Ihrer Wahl. Dieses neue Theme ist nun auch gleich in Verwendung.
• (01:55) Die CSS-Anweisung, diesen neuen Font zu verwenden, muss den korrekten Pfad der hochgeladenen Font-Dateien beinhalten. Diesen passen Sie in der mit den Fonts heruntergeladenen Datei 'stylesheet.css' nun entsprechend an und fügen die CSS-Anweisung in das vorhandene Style-Sheet ein. Dieses kann von Theme zu Theme variieren, den Code können Sie im Zweifelsfall ganz zuoberst platzieren.
• (02:55) Ermitteln Sie den verwendeten Selektor für das zu ändernde Element (z.B. einen Webseiten-Titel, Absätze, Überschriften, etc.). In unserem Beispiel ändern wir den 'Absatz-Titel', dies entspricht dem Selektor 'h2'. In den meisten Fällen stimmt dies überein, 'h1' bis 'h6' werden fast immer für Titel unterschiedlicher Art verwendet. Im Zweifelsfall finden Sie das gewünschte Element wenn Sie den Quellcode der Webseite betrachten. Verwenden Sie hierzu geeignetete Werkzeuge wie die Entwicklertools in z.B. Firefox oder Google Chrome.
• (03:20) Im gefundenen Selektor ersetzen Sie den Wert für 'font-family' durch den Namen des neuen Fonts und speichern anschliessend das Style-Sheet.

Ihr Layout sollte nun bereits die neue Schriftart für das gewünschte Element anzeigen. Passen Sie jetzt noch bei Bedarf die Schriftgrösse, Farbe, etc. an und veröffentlichen Sie die Seite anschliessend.