Konfigurieren Sie benutzerdefinierte Schriftarten für die Verwendung in einer Jitterbit App Builder App

Dieser Artikel erläutert Schritt für Schritt, wie Sie benutzerdefinierte Schriftarten für die Verwendung in einer App Builder-App konfigurieren. Für den Fall, dass Sie eine bestimmte Schriftart verwenden möchten, die nicht über Google Fonts verfügbar ist, unterstützt App Builder die Verwendung einer benutzerdefinierten Schriftart.

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

Anwendungsfall

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

Konfigurieren Sie benutzerdefinierte Schriftarten

1. Folgen Sie den Schritten im CSS Loader Artikel zum Abrufen des Ordners CSS Loader.zip
2. Extrahieren Sie den Inhalt des ZIP-Ordners

3. Kopieren Sie die benutzerdefinierten Schriftdateien, die Sie für Ihre App Builder App verwenden möchten, in das oberste Verzeichnis des CSS Loader

   • Zum Beispiel: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf

4. Verwenden Sie ein Code-Editor-Programm wie Visual Studio Code, um die styles.css Datei zur Bearbeitung

5. Konfigurieren Sie die folgenden Informationen in styles.css Datei, um Informationen für die gewünschte benutzerdefinierte Schriftart anzugeben, indem Sie @font-face Regel:

   • Die reguläre Schriftstärke muss zuerst in der Datei styles.css angegeben werden. Siehe 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 für jede Schriftdatei festgelegten Schriftstärken (z. B. 300, 400, 500, 600 usw.) werden in den Designs zum Ändern der Schriftstärke verwendet und können pro Stärke nur einmal vorhanden sein (z. B. können nicht zwei Schriftdateien mit derselben Schriftstärke festgelegt werden).

   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;
   }
   

6. Speichern Sie alle Änderungen am styles.css Datei

7. Folgen Sie den Schritten im CSS Loader, um das CSS Loader-Widget in eine von Ihrer App verwendete Sammlung hochzuladen.
8. Folgen Sie den Schritten, um den CSS Loader als Site-Widget hinzuzufügen.

9. Konfigurieren Sie abschließend Ihr App-Design, um die benutzerdefinierte Schriftart festzulegen.

   • Navigieren Sie zu Ihrem App-Design.
   • Fügen Sie einen Stil für den Site-Bereich hinzu, wählen Sie „Schriftart“ als Stiltyp und legen Sie unter „Name“ den Namen der benutzerdefinierten Schriftart fest. Beispiel: „SuisseIntl“