Schriftart anpassen

Um Ihre eigenen Schriftarten im HTML Composer und HTML Wizard zu verwenden, müssen Sie diese in die IXM Plattform importieren.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen, um Schriftarten importieren zu können:

• Sie müssen ein Serveradministrator sein, um Schriftarten importieren zu können.

• Bei Ihren Schriftarten muss es sich um Webfonts handeln, die vom Browser angezeigt werden können. 

• Die Schriftarten müssen mit möglichst vielen Browsern kompatibel sein. Die Mindestanforderung ist die Kompatibilität mit Chrome sowie Webkit, da diese Browser für die Wiedergabe auf den meisten Playern verwendet werden.

• Wenn eine Schriftart mehrere Zeichensätze erfordert, müssen die Schriftarten in mehrere Teile aufgeteilt werden, d. h. in mehrere Schriftdateien.

Erstellen der ZIP-Datei

Um Schriftarten in die IXM Plattform zu importieren, müssen Sie eine ZIP-Datei erstellen, die eine Stildatei (style.css), eine Schriftinformationsdatei (fonts.json) und die entsprechenden Schriftdateien enthält. Das ZIP-Archiv muss die Endung .font.zip haben.

Innerhalb der ZIP-Datei können Sie eine eigene Dateistruktur erstellen, um Ihre Schriftarten zu speichern. Stellen Sie jedoch sicher, dass der entsprechende Pfad zu den Schriftarten in der ZIP-Datei korrekt in der style.css-Datei angegeben ist.

Konfigurieren der Stildatei

Die style.css-Datei ist eine Textdatei, die dem Browser Informationen über die Schriftart zur Verfügung stellt. Für jede neue Schriftart ist ein entsprechender Schrifteintrag erforderlich.

@font-face {
src: <url>;
font-family: <family-name>;
font-weight: <weight>;
font-style: <style>;
}

In der Datei müssen Sie alle folgenden Eigenschaften angeben:

Beispiel: Schriftart Noto Sans

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

Konfigurieren der Schriftartinformationsdatei

Die Datei fonts.json stellt Informationen über die Schriftart für die IXM Plattform bereit. Er muss folgende Struktur aufweisen:

{
	"DisplayName": <display-name>,
	"FontFamily": <font-family>,
	"CharacterSets":
	{
		<character-set-name>:
		{
			"DisplayName": <display-name>,
			"FontFamily": <font-family>
		},
		<character-set-name>:
		{
			"DisplayName": <display-name>,
			"FontFamily": <font-family>
}

In der Datei müssen Sie alle folgenden Eigenschaften angeben:

Zusätzliche Schriftarten für nicht verfügbare Zeichen

Wenn eine integrierte Schriftart nicht alle erforderlichen Zeichen enthält, z. B. chinesische Schriftzeichen, können Sie eine zweite Schriftart integrieren, die die fehlenden Zeichen bereitstellt. Beide Schriftarten müssen im Schriftartenordner des Systems verfügbar sein.

Um anzugeben, welche Zeichen verwendet werden sollen, verwenden Sie den unicode-range in der style.css-Datei. 

Beispiel: Combi Font 

In diesem Beispiel stammen die ersten Zeichen (Zahlen und Interpunktion) aus der Schriftart Roboto Mono und alle anderen aus Noto Serif.

Einträge in der style.css-Datei:

Einträge in der Datei fonts.json:

Importieren der Schriftarten

Um Schriftarten in die IXM Plattform zu importieren, kopieren Sie die ZIP-Datei in den uploadFonts-Ordner des Kunden auf dem Server.

• Wenn Sie eine Schriftart zum ersten Mal hinzufügen, empfehlen wir, sie im HTML Wizard und im HTML Composer zu testen.

• Wir empfehlen, zuvor importierte Schriftarten nicht aus dem System zu entfernen.

Angeben von Standardwerten

Sie können Standardwerte für Zeichenabstand und Schriftgröße für jede Schriftart angeben.

Führen Sie dazu die folgenden Schritte aus:

1.  Navigieren Sie zu den Konfigurationsdateien auf dem Server unter: \GVServer2\www\gv2\gf\GFWebHtmlCustomer\

2. Öffnen Sie einen der folgenden Ordner:

   • 00000: Bearbeiten Sie Konfigurationen für den gesamten Server, d.h. für alle Kunden.

   • 000xxx: Kundenspezifische Einstellungen bearbeiten. xxx ist die Kunden-ID.

3. Öffnen Sie die Datei config.json in Ihrem Ordner mit einem Texteditor wie Notepad++.  

4. Wechseln Sie zu asc > composer > defaults > fonts.

5. Ändern Sie die folgenden Werte:

   • fontFamily: Verwenden Sie dasselbe wie in der Datei font.json in der jeweiligen .font.zip-Datei.

   • letterSpacing: Geben Sie den Zeichenabstand in Pixel an.

   • fontSize: Geben Sie die Schriftgröße in Pixel an.

6. Speichern Sie Ihre Änderungen, und schließen Sie die Datei.

"font":{
          "Lobster GF":{
            "letterSpacing": 0px,
            "fontSize": 22px,
            "paddingTopPercent ": 20

          },
          "Roboto GF":{
            "letterSpacing": 50px,
            "fontSize": 12px,
            "paddingTopPercent ": 50

          }
        }

Beispiel: Cormoran Garamond_serif_OFL

fonts.json:

{
	"DisplayName":"Cormorant Garamond",
	"FontFamily":"Cormorant Garamond",
	"CharacterSets":
	{
	}
}

style.css:

@font-face{
    font-family:"Cormorant Garamond";
    src:url("fonts/CormorantGaramond-Regular.ttf");
}
@font-face{
    font-family:"Cormorant Garamond";
    src:url("fonts/CormorantGaramond-Bold.ttf");
    font-weight: bold;
}
@font-face{
    font-family:"Cormorant Garamond";
    src:url("fonts/CormorantGaramond-Italic.ttf");
    font-style: italic;
}
@font-face{
    font-family:"Cormorant Garamond";
    src:url("fonts/CormorantGaramond-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}