Eigene Schriftarten im CubicCMS verwenden

Schritt 1 - Schriftart hochladen

Der erste Schritt ist, die Schriftart im CubicCMS hochzuladen. Das ist notwendig, damit jeder Besucher der Seite die benötigte Schriftart herunterladen kann, falls sein System sie noch nicht hat.

1. Finden Sie die gewünschten Schriftarten als Dateien auf Ihrem Gerät. Bei bereits installierten Schriften kann das etwas komplizierter sein, weshalb wir das hier nicht weiter erklären werden und stattdessen darum bitten, das Vorgehen zu googeln. Wenn Sie die Schriftart zum Beispiel von Google Fonts heruntergeladen haben, dann sollten Sie eine oder mehrere Dateien im .otf oder.ttf Format haben.
2. Öffnen Sie den Dateimanager im CubicCMS und erstellen Sie einen neuen Ordner für Schriftarten, falls nicht schon vorhanden.
3. Laden Sie alle Dateien der gewünschten Schriftart hoch. In meinem Beispiel benutze ich die Schriftart "Roboto" und habe 3 Dateien, die ich hochladen muss "Roboto-Regular.ttf", "Roboto-Bold.ttf" und "Roboto-Italic.ttf". Wie die Dateinamen schon vermuten lassen, ist in jeder Datei eine Schriftschnitte der Schriftart. Wir brauchen alle 3, damit wie die Schrift Fett, Normal, oder Kursiv verwenden können. Die Schriftart hätte theoretisch noch viel mehr Möglichkeiten, aber wir bleiben mal bei diesen 3.
4. Im Dateimanager klicken Sie jetzt die erste dieser Dateien an. Auf der rechten Seite finden Sie Details zur Datei und auch Felder, die die Schriftart beschreiben. Für die Datei "Roboto-Regular.ttf" trage ich folgendes in die Felder ein:
   1. Schriftart Name: Roboto
   2. Schriftart Typ: Normal
   3. Schriftart Stärke: Normal
   4. Schriftart Laufweite: Normal
5. Für die Datei "Roboto-Bold.ttf" trage ich folgendes in die Felder ein:
   1. Schriftart Name: Roboto
   2. Schriftart Typ: Normal
   3. Schriftart Stärke: Fett
   4. Schriftart Laufweite: Normal
6. Für die Datei "Roboto-Italic.ttf" trage ich folgendes in die Felder ein:
   1. Schriftart Name: Roboto
   2. Schriftart Typ: Kursiv
   3. Schriftart Stärke: Normal
   4. Schriftart Laufweite: Normal
7. Wiederholen Sie diese Schritte für alle Schriftschnitte, die Sie zur Verfügung haben sollen.
8. Schließen Sie jetzt den Dateimanager und wechseln Sie in die Optionen.
9. Hier finden Sie den Menüpunkt "Schriftarten". Dort sollten Sie jetzt die Schriftart als Überschrift sehen, mit allen Schriftschnitten, die Sie angelegt haben. Die Überschriften des jeweiligen Schriftschnittes sollte diesen Schriftschnitt auch als Vorschau zeigen.
10. Sofern alles stimmt, können Sie den grünen Knopf "In CSS Datei speichern" drücken. Wodurch die Schriftschnitte und die eingestellten Optionen öffentlich zur Verfügung gestellt werden.

Schritt 2 - Schriftarten verwenden

Um die hochgeladenen Schriftarten verwenden zu können benutzen wir den CSS Editor. Diesen öffnen wir über das Administrations-Menü oben links und drücken auf "CSS Editor".

Um die Schriftart auf alles anzuwenden, fügen Sie folgendes in den CSS Editor ein:
body { font-family: Roboto; }

Um die Schriftart beispielsweise nur auf die Überschriften des Typs Header 1 anzuwenden und diese Überschriften fett zu machen, tragen Sie folgendes ein:
h1 { font-family: Roboto; font-weight: bold; }
Die Zahl kann einfach immer weiter erhöht werden, um die anderen Header anzupassen.

Um zum Beispiel Links in der Schriftart und Kursiv zu machen, tragen Sie folgendes ein:
a { font-family: Roboto; font-style: italic; }

Drücken Sie zum Schluss "Speichern" und schließen Sie den CSS Editor. Jetzt sollte Ihre gewünschte Schriftart in Anwendung sein.