Konfigurieren Sie benutzerdefinierte Schriftarten zur Verwendung in einer Jitterbit App Builder App

Dieser Artikel führt Sie durch die Konfiguration benutzerdefinierter Schriftarten für die Verwendung in an App Builder app. Wenn Sie eine bestimmte Schriftart verwenden möchten, die nicht über Google Fonts verfügbar ist, App Builder unterstützt die Möglichkeit, mit einem benutzerdefinierten Schrifttyp zu arbeiten.

Siehe Google Fonts für die Verwendung konfigurieren in App Builder Artikel für Informationen zur Konfiguration von Google Fonts.

Anwendungsfall

Unternehmen haben oft eine bestimmte Schriftart als Teil ihrer Markenrichtlinien deklariert und diese Schriftart ist möglicherweise nicht in Google Fonts verfügbar. In diesem Szenario App Builder unterstützt die Möglichkeit, die Schriftdateien als Teil eines Widgets zu laden und sie in einer CSS-Datei mit dem @font-face Funktionalität.

Konfigurieren Sie benutzerdefinierte Schriftarten

Folgen Sie den im CSS Loader beschriebenen Schritten Artikel, um den Ordner CSS Loader.zip abzurufen
Extrahieren Sie den Inhalt des .zip-Ordners
Kopieren Sie die benutzerdefinierten Schriftdateien, die Sie für Ihre App Builder app in das oberste Verzeichnis des CSS Loader
- Beispiel: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf
Verwenden Sie ein Code-Editor-Programm wie Visual Studio Code, um die styles.css Datei zum Bearbeiten
Konfigurieren Sie die folgenden Informationen in der styles.css, um Informationen für die gewünschte benutzerdefinierte Schriftart anzugeben @font-face Regel:
- Die normale Schriftstärke muss zuerst in der Datei styles.css angegeben werden. Siehe die Beispielsyntax unten.
- Die Schriftstärkenwerte müssen im Zahlenformat angegeben werden (z. B. 300, 400, 500, 600 usw.). Die Verwendung von „leichter“, „normal“, „fett“ und „fetter“ funktioniert nicht für mehrere Stärken.
- Die Schriftstärkenwerte (z. B. 300, 400, 500, 600 usw.), die Sie für jede Schriftdatei festlegen, sind die Schriftstärkenwerte, die Sie in Designs zum Ändern der Stärke verwenden, und können nur einmal pro Stärke vorhanden sein (z. B. können Sie nicht 2 Schriftdateien mit demselben Schriftstärkenwert festlegen)
Styles.css-Syntaxbeispiel
```
/* Suisse Font */

@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-Bold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-SemiBold.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}
```
Speichern Sie alle Änderungen an der styles.css Datei
Folgen Sie den im CSS Loader beschriebenen Schritten, um das CSS Loader-Widget in eine Sammlung hochzuladen, die Ihre App verwendet
Folgen Sie den beschriebenen Schritten, um den CSS Loader als Site-Widget hinzuzufügen
Zuletzt müssen Sie Ihr App-Design konfigurieren, um die benutzerdefinierte Schriftart anzugeben
- Navigieren Sie zu Ihrem App-Design
- Fügen Sie einen Stil hinzu, der auf den Site-Bereich abzielt, wählen Sie Schriftart als Stiltyp und legen Sie den Namenswert auf den benutzerdefinierten Schriftartnamen fest. Beispiel: „SuisseIntl“