Zum Inhalt springen

Verwandeln Sie Ihre Kontakte in Urlaubsgeld mit unserem neuen Kundenempfehlungsprogramm! Erfahren Sie mehr

Diese Dokumentation gilt für Version 4 und höher von App Builder, dem neuen Namen für Vinyl. Hier gelangen Sie zur Vinyl-Dokumentation.

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

Diese Anleitung erklärt Ihnen Schritt für Schritt die Verwendung von Google Fonts in einer App Builder Anwendung. Wenn Sie für die in Ihrer Anwendung verwendeten Google Fonts unterschiedliche Schriftstärken festlegen möchten, sind möglicherweise zusätzliche Konfigurationsschritte erforderlich, um das gewünschte Ergebnis zu erzielen. Um verschiedene Google Font-Schriftstärken im App Builder nutzen zu können, müssen Sie den Importcode aktualisieren und bei der Konfiguration der Site-Widget-Parameter vor jeder in der Google API -Syntax angegebenen Schriftstärke eine „0“ einfügen.

Es müssen zwei Hauptbereiche konfiguriert werden. Der erste umfasst die Konfiguration eines Site-Widgets. Anschließend müssen Sie das App-Design anpassen, um die über die Anwendungsebene ausgewählte Schriftart zu verwenden.

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-Parameter auf + Parameter
  7. Wählen Sie WebFontName als Parameterwert
  8. Geben Sie die Google Font API Informationen für die gewünschte Google-Schriftart in das Feld Wert ein. In diesem Schritt ändern Sie die bereitgestellte Google API Syntax, um Folgendes einzuschließen: 0,vor den angegebenen Schriftstärken. Beispiel:

    • Google Font-Syntax: Lato:wght@100;300;400;700&display=swap"
    • Geänderte Syntax für die 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 die Theme-Sammlung Ihrer App und klicken Sie auf das entsprechende Theme.
  3. Klicken Sie auf das Datensatz öffnen-Symbol des Themes, um die Theme-Informationen zu erweitern.
  4. Wählen Sie die Seite-Komponente aus 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 Bundesländer als Bundesland.
  8. Geben Sie die Schriftfamilie Wert 1 an, um Informationen zur gewünschten Google-Schriftart bereitzustellen. Beispiel: Lato, sans-serif
  9. Geben Sie eine Beschreibung für die Technische Hilfe 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 entsprechend Schritt 8 an. Beispiel: Lato, sans-serif
  14. Klicken Sie auf Speichern.

fontstyles.png

Beispiel-Stile, die für die Google-Schriftart konfiguriert sind

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

Zusätzliche Ressourcen