Wie man eine benutzerdefinierte Header-Schriftart in der Wissensdatenbank konfiguriert

Document360 enthält eine Reihe integrierter Header-Schriften, aber Sie können über die Standardoptionen hinausgehen, indem Sie jede Schriftart aus Google Fonts in Ihre Wissensdatenbank laden. 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 dauert etwa fünf Minuten und verschafft Ihnen Zugriff auf die vollständige Google-Schriften-Bibliothek mit über 1.500 Schriftarten, die Ihrer Marke oder Ihrem Dokumentationsstil entsprechen.

Wann sollte man das verwenden

Nutzen Sie diese Anpassung, wenn Sie:

• Wenden Sie eine bestimmte Google-Schriftart an, die 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 Zugriff auf Verbindungen > Integrationen > benutzerdefiniertes HTML im Knowledge Base-Portal, um Schritt 2 abzuschließen.
• Du brauchst Zugriff auf die Einstellungen (
  ) > Knowledge Base-Seite > Site-Anpassung > benutzerdefiniertes CSS und JavaScript , um Schritt 3 abzuschließen.
• Dieser Leitfaden verwendet Google Fonts als Beispielquelle, aber derselbe Ansatz funktioniert bei jeder Webschriftart, die einen HTML-Einbettungslink und eine CSS-Deklaration font-family bereitstellt.
• Der Prozess umfasst drei aufeinanderfolgende Schritte: Den Schriftcode abrufen, ihn zu Custom HTML hinzufügen und dann in Custom CSS anwenden. Alle drei Schritte sind erforderlich, damit die Schriftart korrekt dargestellt wird.

Wie man eine Google-Schriftart in Document360 konfiguriert

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

1. Geh zu Google Fonts.

2. Wählen Sie die gewünschte Schriftart aus. Die Schriftseite erscheint mit verfügbaren Stilen.

3. Oben rechts klicken Sie auf Schriftart abrufen und dann auf Code einbetten.

   Im Bereich Web erscheint der Einbettungscode für Ihre gewählte Schriftart.

4. Klicken Sie auf Code 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

5. Im Document360-Portal navigieren Sie zu Verbindungen > Integrationen.
6. Wählen Sie benutzerdefiniertes HTML aus und klicken Sie auf Hinzufügen. Die Header (above </head>) Option ist standardmäßig ausgewählt, behalte diese Auswahl.
7. Fügen Sie den in Schritt 4 kopierten Embed-Code in den Header-Bereich ein.
8. Klicken Sie auf Hinzufügen.

Schritt 3 – Wende die Schriftart in Custom CSS an

9. Navigiere zu den Einstellungen (

   ) > Wissensdatenbank-Seite > Site-Anpassung > benutzerdefiniertes CSS und JavaScript im Knowledge Base-Portal.

   

10. Der Tab Custom CSS ist standardmäßig ausgewählt. Klicken Sie auf die Schaltfläche "Code hinzufügen".

11. Wählen Sie die Option " Überschrift Schriftart ändern " aus. Die folgende Code-Vorlage erscheint:

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

12. Ersetzen font-family: "Source Sans Pro", sans-serif; Sie sie durch die CSS-Regeln, um Familien aus dem Embed-Code zu spezifizieren, den Sie in Schritt 4 kopiert haben.
13. Aktualisiere den color Wert mit deiner gewünschten Schriftfarbe.
14. Klicken Sie auf Speichern.

Ergebnis

Die benutzerdefinierte Schriftart wird nun in deiner gesamten Wissensdatenbank angewendet. Das Vorher-Nachher-Format unten zeigt den Unterschied in der Typografie nach Abschluss aller drei Schritte.

Best Practices

• Erledigen Sie alle drei Schritte der Reihe nach. Das Laden der Schriftart in Custom HTML, ohne sie in Custom CSS anzuwenden, hat keinen sichtbaren Effekt; Die Schriftart wird dem Browser zur Verfügung stehen, aber keinem Element zugewiesen. Ebenso führt das Hinzufügen einer font-family Deklaration in CSS ohne vorheriges Laden der Schriftdatei dazu, dass der Browser auf die Standardschriftart zurückfällt.
• Verwenden Sie genau den font-family Wert aus dem Embed-Code. Google Fonts stellt die genaue CSS-Zeichenkette font-family im Embed-Code 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.
• Teste nach dem Speichern browserübergreifend. Die Schriftart kann leicht zwischen Chrome, Safari, Firefox und Edge variieren. Überprüfen Sie Ihre Wissensdatenbank in mindestens zwei Browsern, um sicherzustellen, dass die Schriftart korrekt lädt und angezeigt wird.
• Behalte die Rückfall-Schriftart. Der sans-serif Fallback-in font-family: "Your Font", sans-serif; sorgt dafür, dass die Leser eine lesbare Schriftart weiterhin sehen, wenn die Google-Schriftart nicht geladen wird (zum Beispiel in Umgebungen, die externe Anfragen blockieren). Fügen Sie immer einen generischen Rückfallplan hinzu.
• Berücksichtigen Sie Schriftstärke und Leistung. Google Fonts ermöglicht es, beim Erstellen des Einbettungscodes bestimmte Gewichte (Regular, Bold usw.) auszuwählen. Lade nur die Gewichte, die du brauchst – das Laden aller verfügbaren Gewichte verlängert die Seitenladezeit.