Dieser Artikel beschreibt, wie Sie eine neue Schriftart (Font) in inCMS hochladen und integrieren können. Dies kann eine Schriftart sein, die Sie heruntergeladen, gekauft oder für Sie entworfen haben.

Wenn Sie Ihre Website von Google Fonts trennen möchten: befolgen Sie dazu die gleichen Schritte oder wählen Sie eine andere Schriftart als Google Font (siehe letzter Absatz in diesem Artikel).


Schriftart herunterladen

Holen Sie sich die Font-Dateien. Normalerweise reicht es aus, die woff2-Datei zu haben. Diese Datei funktioniert auf allen modernen Browsern. Ältere Browserversionen benötigen möglicherweise andere Dateitypen. Es reicht nicht aus, nur eine ttf-Datei zu haben. Diese Datei ist erforderlich, um eine Schriftart auf Ihrem Computer zu installieren, funktioniert jedoch nicht auf Ihrer Website.

Hinweis: Es gibt kostenlose Online-Konverter für Schriftarten, die eine ttf-Datei in andere Schriftarten konvertieren können, aber die meisten von ihnen beschädigen die Datei und dann funktioniert die Datei nicht mehr.


Hochladen in inCMS

Laden Sie die Datei an der gleichen Stelle hoch, an der Sie Bilder hochgeladen haben (gehen Sie zu Dateien im Menü links).

Hinweis: Laden Sie nur Dateien und keinen Ordner hoch.


CSS-Code hinzufügen

In CSS müssen Sie zwei Codeteile hinzufügen (siehe Einstellungen -> Design -> CSS im Menü links). Der erste Teil definiert die Schriftfamilie. Der zweite Teil definiert, für welche Textarten diese Schriftart verwendet werden soll.


Beispiel Code Teil 1:

@font-face {
font-family: 'FONT NAME';
font-style: normal;
font-weight: 400;
src: url('../filebrowser/FONTFILENAME.XYZ');
}


Ersetzen Sie FONT NAME durch den Schriftartnamen. Passen Sie bei Bedarf die Eingabe für Stil (in diesem Beispiel 'normal') und Gewicht (in diesem Beispiel '400') an. Ersetzen Sie FONTFILENAME.XYZ durch den Dateinamen der Schriftart einschließlich der Erweiterung. Fügen Sie mehrere durch Kommas getrennte Zeilen mit url ('../ filebrowser / FONTFILENAME.XYZ') hinzu, wenn Sie Dateien mit unterschiedlichen Erweiterungen definieren möchten.


Beispiel Code Teil 2:

h1{font-family: 'FONT NAME';}


Ersetzen Sie FONT NAME durch den Schriftartnamen. Definieren Sie dies für alle Textarten, für die Sie die Schriftart verwenden möchten (Überschrift 1, Überschrift 2, ..., Absatz, Link, ...).


Jetzt können Sie testen, ob die Schriftart funktioniert. Ist dies nicht der Fall, melden Sie sich zuerst von der Website ab. Dann aktualisieren Sie Ihren Browser. Die Schriftart sollte nun auch auf einem mobilen Gerät und einem Chrome Incognito-Fenster funktionieren.


Verbindung zu Google Fonts trennen

Wenn Sie eine Google-Schriftart verwenden, verbindet sich Ihre Website mit dem Google-Server und lädt die erforderlichen Web-Schriftarten in Ihren Browser-Cache. Wenn Sie dies nicht möchten:

1) Wählen Sie eine Nicht-Google-Schriftart

oder

2) Laden Sie eine Google-Schriftart herunter und installieren Sie sie (wie oben beschrieben; stellen Sie sicher, dass Sie eine woff2-Datei herunterladen).


So wählen Sie eine Nicht-Google-Schriftart aus: Gehen Sie im linken Menü zu Einstellungen -> Design -> Typografie. Wählen Sie für jeden Texttyp eine Schriftart aus der Liste vor der --------- Zeile aus. Alle Schriftarten unterhalb dieser Zeile sind Google-Schriftarten. Sie müssen dies in allen Menüs tun, die die verwendeten Schriftarten definieren (also auch andere Menüs als Typografie). Wenn Sie dies tun, wird die Verbindung zu Google automatisch getrennt.