Zum Inhalt springen

Konfigurieren Sie Google Fonts für die Verwendung im Jitterbit App Builder

Diese Anleitung erklärt Ihnen Schritt für Schritt, wie Sie Google Fonts verwenden in an App Builder Anwendung. Wenn Sie unterschiedliche Gewichte für die Google Fonts angeben möchten, die Ihre Anwendung verwenden wird, sind möglicherweise zusätzliche Konfigurationen erforderlich, um das gewünschte Ergebnis zu erzielen. Um unterschiedliche Google Font-Gewichte von App Builder Sie müssen den Importcode aktualisieren, um beim Konfigurieren der Site-Widget-Parameter vor jeder in der Google API -Syntax angegebenen Gewichtung eine „0“ einzufügen.

Es müssen zwei Hauptbereiche konfiguriert werden. Der erste umfasst die Konfiguration eines Site-Widgets. Nachdem dies konfiguriert ist, müssen Sie Ihr App-Design ändern, um die über die Anwendungsebene UI/UX ausgewählte Schriftart zu nutzen.

Konfigurieren Sie ein Site-Widget für die Verbindung mit Google Fonts

  1. Navigieren Sie zu IDE > Zusätzliche Einstellungen
  2. Klicken Sie auf Site Widgets
  3. Klicken Sie unter Site Widgets auf + Widget-Registrierung
  4. Klicken Sie auf das Dropdown-Menü für die Widget-Spalte und wählen Sie Web Font Loader
  5. Klicken Sie auf das Häkchen-Symbol, um zu speichern
  6. Klicken Sie unter Site Widget Parameters auf + Parameter
  7. Wählen Sie WebFontName als Parameterwert

  8. Geben Sie die Google Font API Informationen für den benannten Google Font, den Sie verwenden möchten, in das Feld Wert ein. In diesem Schritt ändern Sie die bereitgestellte Google API Syntax, um Folgendes einzuschließen: 0, vor den angegebenen Gewichten. Beispiel:

    • Google Font-Syntax: Lato:wght@100;300;400;700&display=swap"
    • Geänderte Syntax zur Eingabe in das Wertefeld: Lato:wght@0,100;300;400;700&display=swap"

  9. Klicken Sie auf Speichern

sitewidget.png

Beispiel eines Web Font Loader-Widgets zur Angabe der Google-Schriftart

Ändern Sie Ihr Design, um den Schriftwert anzugeben

  1. Navigieren Sie zu App Workbench > Look & Feel
  2. Suchen Sie Ihre App-Theme-Sammlung und klicken Sie auf das entsprechende App-Theme
  3. Klicken Sie auf das Datensatz öffnen-Symbol des Themes, um die Theme-Informationen zu erweitern
  4. Wählen Sie die Seite-Komponente und klicken Sie unter Stile auf + Stil
  5. Wählen Sie den Container Seite als Bereich
  6. Wählen Sie Schriftart als Stiltyp
  7. Wählen Sie Alle Staaten als Staat
  8. Geben Sie die Wert 1-Schriftfamilieninformationen an, um Informationen zur Google-Schriftart bereitzustellen, die Sie verwenden möchten. Beispiel: Lato, sans-serif
  9. Geben Sie eine Technische Hilfe-Beschreibung ein
  10. Klicken Sie unter Stile auf + Stil
  11. Wählen Sie den Container Site als Bereich
  12. Wählen Sie Schriftart als Stiltyp
  13. Geben Sie die Schriftfamilie Wert 1 an, die Schritt 8 entspricht. Beispiel: Lato, sans-serif
  14. Klicken Sie auf Speichern

fontstyles.png

Beispielstile, die so konfiguriert sind, dass sie den Google-Schrifttyp angeben

Überprüfen Sie nach Abschluss der oben beschriebenen Schritte, ob Ihr Design mit Ihrer App verknüpft ist. Vorausgesetzt, dies ist der Fall, können Sie jetzt zur Anzeige Ihrer Anwendung navigieren, den Webbrowser aktualisieren und die neue Schriftart sehen.

Zusätzliche Ressourcen