Wie man eine benutzerdefinierte Schriftart in der Wissensdatenbank konfiguriert

Document360 enthält eine Reihe standardmäßiger eingebauter Schriftarten, aber Sie können jede Google-Schriftart oder jede andere Webschrift auf den Text Ihrer Wissensdatenbank anwenden. Dies geschieht in zwei Teilen: Sie laden die Schriftdatei über Custom HTML und wenden sie dann über benutzerdefiniertes CSS auf Ihre Inhalte an. Der Prozess verschafft Ihnen Zugriff auf die vollständige Google Fonts-Bibliothek, die zu Ihrer Marke oder Ihrem Dokumentationsstil passt.

HINWEIS

Sie können auch benutzerdefinierte Schriftarten außer Google Fonts konfigurieren, indem Sie den entsprechenden HTML-Einbettungslink und die CSS-Deklaration font-family Ihres Schriftanbieters verwenden.

Wann sollte man das verwenden

Nutzen Sie diese Anpassung, wenn Sie möchten:

Wenden Sie eine bestimmte Google-Schriftart auf den Haupttext an, der nicht in der Standard-Schriftart von Document360 enthalten ist.
Passen Sie Ihre Dokumentationstypografie an Ihre Produkt- oder Markenrichtlinien ab.
Verbessern Sie die visuelle Konsistenz zwischen Ihrer Wissensdatenbank und Ihrer Website oder Produktoberfläche.

Bevor du anfängst

Sie benötigen Zugang zu Verbindungen > Integrationen > benutzerdefiniertem HTML im Knowledge Base-Portal, um Schritt 2 abzuschließen.
Du brauchst Zugriff auf die Einstellungen (
) > Wissensdatenbank Seite > Site-Anpassung > benutzerdefiniertes CSS und JavaScript , um Schritt 3 abzuschließen.
Alle drei Schritte sind erforderlich, damit die Schriftart korrekt dargestellt wird. Das Laden der Schriftart ohne die Anwendung des CSS oder das Verwenden des CSS ohne das Laden der Schriftart hat keinen sichtbaren Effekt.

Wie man eine benutzerdefinierte Fließtextschriftart konfiguriert

Schritt 1 – Holen Sie sich den Google Font Embed-Code

Geh zu Google Fonts.
Wählen Sie die gewünschte Schriftart aus. Die Schriftseite erscheint mit verfügbaren Stilen.
Oben rechts klicken Sie auf Schriftart abrufen und dann auf Code einbetten.

Im Bereich Web erscheint der Einbettungscode für Ihre gewählte Schriftart.
Klicken Sie auf Kopieren , um den Einbettungscode zu kopieren, und kehren Sie dann zu Document360 zurück.

Schritt 2 – Fügen Sie den Link zur Schriftart zu benutzerdefiniertem HTML hinzu

Navigieren Sie in der linken Navigationsleiste im Knowledge Base-Portal zu Verbindungen > Integrationen .
Navigiere zum Abschnitt Benutzerdefiniertes HTML und klicke auf Hinzufügen.

Die Header (above </head>) Option ist standardmäßig ausgewählt, behalte diese Auswahl.
Fügen Sie den in Schritt 4 kopierten Embed-Code in den Header-Bereich ein.
Klicken Sie auf Hinzufügen.

Schritt 3 – Wende die Schriftart in Custom CSS an

Navigiere zu den Einstellungen (
) > Wissensdatenbank-Seite in der linken Navigationsleiste im Wissensdatenbank-Portal.
Im linken Navigationsfenster navigieren Sie zu Site-Anpassung > benutzerdefiniertes CSS & JavaScript.
Wähle im linken Navigationsfenster den CSS-Tab aus.
Klicke oben rechts im Codebereich auf Codeschnipsel hinzufügen .
Wählen Sie die Option " Schriftart des Haupttextes ändern ". Die folgende Code-Vorlage erscheint:

body, article {
  font-family: "Source Sans Pro", sans-serif;    /*Replace your body font family*/ 
  color: #222222;    /*Font color*/ 
}

Add code snippets panel showing the Change body text font option selected

Stellen Sie sicher, dass der article Selektor zusammen mit dem body Selektor im Ausschnitt enthalten ist; beide werden benötigt, um die Schriftart sowohl auf den Artikelinhalt als auch auf die größere Seite anzuwenden.
Ersetzen Sie font-family: "Source Sans Pro", sans-serif; durch die CSS-Regeln, um Familien aus dem in Schritt 4 kopierten Einbettungscode zu spezifizieren.
Aktualisiere den color Wert mit deiner gewünschten Schriftfarbe.
Klicken Sie oben rechts auf Speichern .

Die ausgewählte Schriftart wird nun auf Ihre Wissensdatenbank angewendet. Besuchen Sie die Website der Wissensdatenbank, um die Änderungen vorzusehen.

Best Practices

Erledigen Sie alle drei Schritte der Reihe nach. Das Laden der Schriftart in benutzerdefiniertem HTML macht sie dem Browser zugänglich, aber sie wird nicht angewendet. Das CSS in Schritt 3 sagt dem Browser, wo es verwendet werden soll. Beide Schritte sind erforderlich und müssen auf denselben Schriftarten Bezug nehmen.
Beziehen Sie sowohl als article auch body Auswähler ein. Der article Selektor stellt sicher, dass die Schriftart im Artikelinhalt angewendet wird, nicht nur auf die umliegenden Seitenelemente. Ohne sie ändert sich der Fließtext in Artikeln möglicherweise nicht.
Verwenden Sie genau den font-family Wert aus dem Embed-Code. Google Fonts stellt die genaue CSS-Zeichenkette font-family unter "CSS-Regeln zur Spezifikation von Familien" bereit. Kopieren Sie diesen Wert genau, einschließlich des Rückfall-Stacks, um Inkonsistenzen zwischen Browsern zu vermeiden.
Behalte die Rückfall-Schriftart. Der sans-serif Rückfallplan font-family: "Your Font", sans-serif; sorgt dafür, dass die Leser eine lesbare Schriftart sehen, selbst wenn die Google-Schrift nicht geladen wird. Fügen Sie immer einen generischen Rückfallplan hinzu.
Lade nur die benötigten Schriftstärken ein . Wenn Sie den Einbettungscode aus Google Fonts kopieren, wählen Sie nur die spezifischen Gewichte aus, die Ihre Dokumentation verwendet (zum Beispiel Regular 400 und Bold 700). Das Laden aller verfügbaren Gewichte erhöht die Seitenladezeit ohne Nutzen.
Teste nach dem Speichern in deiner Live-Wissensdatenbank. Schriftänderungen gelten auf der gesamten Seite. Öffnen Sie nach dem Speichern mehrere Artikeltypen, um sicherzustellen, dass die Schriftart korrekt lädt und angezeigt wird.

Documentation Index