Ferndesk
Anpassung

Benutzerdefinierte Schriftarten zu Ihrem Hilfe-Center hinzufügen

Passen Sie die Typografie Ihres Hilfe-Centers an Ihre Markenrichtlinien an, indem Sie benutzerdefinierte Schriftarten von Google Fonts oder selbstgehosteten Quellen hinzufügen.

Verwendung der Schriftart-Auswahl (nur Google Fonts)

Für einen schnellen Zugriff auf Google Fonts verwenden Sie die integrierte Schriftart-Auswahl:

  1. Erweitern Sie Help Center in der Seitenleiste und klicken Sie dann auf Customize

  2. Öffnen Sie das Panel Branding

  3. Scrollen Sie zum Abschnitt Typography

  4. Wählen Sie eine Schriftfamilie für Heading font oder Body font aus

  5. Klicken Sie auf Advanced Options, um spezifische Schriftstärken (Thin bis Black) auszuwählen

  6. Klicken Sie auf Save changes

Die Schriftart-Auswahl unterstützt nur Google Fonts. Für Adobe Fonts, eigene Schriftarten oder mehr Kontrolle über das Styling verwenden Sie die unten beschriebene Head-Code-Methode.

Hinzufügen benutzerdefinierter Schriftarten über Head Code

Für Nicht-Google-Schriftarten oder fortgeschrittene Anpassungen fügen Sie Einbettungscodes direkt in Ihr Hilfe-Center ein:

Schritt 1: Schriftart finden und Einbettungscode abrufen

Google Fonts:

  1. Besuchen Sie Google Fonts

  2. Durchsuchen oder suchen Sie nach Ihrer gewünschten Schriftart

  3. Klicken Sie auf den Namen der Schriftart, um die Detailseite anzuzeigen

  4. Klicken Sie auf die Schaltfläche Get font

  5. Kopieren Sie den bereitgestellten <link>-Einbettungscode

Das Bild zeigt eine dunkel gestaltete Benutzeroberfläche von 'Google Fonts', unterteilt in drei Hauptbereiche: eine linke Seitenleiste, eine obere Navigations-/Suchleiste mit Filteroptionen und den Hauptinhaltsbereich mit Schriftart-Vorschauen. Die UI-Elemente sind klar definiert, und die Textlesbarkeit ist durch den hohen Kontrast zwischen weißem Text und dunklem Hintergrund gut. Die linke Seitenleiste enthält die Hauptnavigation mit Symbolen und Beschriftungen wie 'Fonts', 'Noto', 'Icons', 'Knowledge' und 'FAQ'. Darunter befinden sich die Abschnitte 'Preview' und 'Filter'. Der Bereich 'Preview' enthält ein Eingabefeld 'Type something' und einen Schriftgrößenregler (aktuell '40px'). Der Bereich 'Filter' umfasst zuklappbare Kategorien für Sprache und Stilrichtung. Ganz unten links befindet sich ein Sonnen-/Mond-Symbol für den Hell-/Dunkelmodus. Die obere Leiste zeigt das Google Fonts-Branding, ein Suchfeld und einen Warenkorb. Im Inhaltsbereich werden 1899 Schriftfamilien angezeigt, wobei jeder Eintrag den Namen (z. B. 'Roboto'), Details zum Designer und eine Textvorschau zeigt.
Das Bild zeigt eine dunkel gestaltete Google Fonts-Webseite zur Schriftart 'Roboto'. Oben links befindet sich eine Seitenleiste mit Navigationselementen; darunter ein Symbol zum Umschalten des Farbmodus. Die obere Navigationsleiste enthält das Logo, ein Suchfeld und ein Einkaufstaschen-Symbol. Darunter liegen Tabs wie 'Specimen' (aktiv), 'Type tester' und 'About'. Der Hauptbereich zeigt den Namen 'Roboto' in großer Fettschrift, die Designer-Credits sowie Tags wie 'Sans Serif' und 'Business'. Rechts daneben befindet sich eine blaue Schaltfläche 'Get font'. Eine Informationsblase erklärt, dass man hier den Einbettungscode abrufen kann. Darunter ist eine Textprobe in Roboto zu sehen: 'Whereas disregard and contempt for human rights have resulted', gefolgt von Optionen zur Vorschauanpassung und einer Liste verschiedener Stile.

Beispiel für Adobe Fonts:

  1. Besuchen Sie Adobe Fonts und melden Sie sich an

  2. Durchsuchen Sie Schriftarten und fügen Sie diese einem Webprojekt hinzu

  3. Kopieren Sie in Ihren Webprojekt-Einstellungen den <link>-Einbettungscode

Der Screenshot zeigt die Startseite von Adobe Fonts in einem sauberen, modernen Design mit einem rot-blauen Farbverlauf im Hero-Bereich. Die obere Navigationsleiste auf weißem Hintergrund enthält die Navigationselemente.

Selbstgehostete Schriftarten:

Erstellen Sie eine @font-face-Regel, die auf Ihre Schriftdateien verweist:

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('https://yoursite.com/fonts/customfont.woff2') format('woff2'),
       url('https://yoursite.com/fonts/customfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
</style>

Verwenden Sie die Formate WOFF2 und WOFF für die beste Browserkompatibilität und Leistung. Hosten Sie die Schriftdateien auf einem zuverlässigen CDN oder Ihrem eigenen Server.

Schritt 2: Einbettungscode zum Head Code hinzufügen

  1. Erweitern Sie Help Center in der Seitenleiste und klicken Sie dann auf Customize

  2. Öffnen Sie das Panel Advanced

  3. Suchen Sie den Editor für Custom head code

  4. Fügen Sie Ihren Einbettungscode ein (den <link>-Tag oder den <style>-Block aus Schritt 1)

  5. Klicken Sie auf Save changes

Der Custom head code Editor im Advanced Panel, in dem Sie Einbettungscodes für Schriftarten und CSS einfügen können

Der Head-Code-Editor validiert die Syntax vor dem Speichern nicht. Testen Sie Ihren Code sorgfältig, um das Styling Ihres Hilfe-Centers nicht zu beeinträchtigen.

Schritt 3: Schriftart via CSS anwenden

Nach dem Einbetten der Schriftart fügen Sie CSS-Regeln hinzu, um sie auf bestimmte Elemente anzuwenden:

<style>
/* Apply custom font to all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Your Font Name', sans-serif;
}

/* Apply custom font to body text */
body, p {
  font-family: 'Your Font Name', serif;
}
</style>

Fügen Sie dieses CSS im selben Editor für Custom head code hinzu, entweder innerhalb desselben <style>-Blocks wie Ihre @font-face-Deklaration oder in einem separaten Block.

Änderungen werden sofort nach dem Speichern wirksam. Besuchen Sie Ihr Live-Hilfe-Center, um zu bestätigen, dass die Schriftarten korrekt angezeigt werden.

Fehlerbehebung

Schriftarten werden nicht geladen:

  • Überprüfen Sie, ob die Syntax des Einbettungscodes korrekt ist (keine fehlenden Anführungszeichen oder Klammern)

  • Stellen Sie sicher, dass die Schrift-URLs öffentlich zugänglich sind (CORS-aktiviert bei selbstgehosteten Schriftarten)

  • Stellen Sie sicher, dass die Namen der Schriftfamilien im CSS exakt übereinstimmen (Groß-/Kleinschreibung beachten)

Schriftart-Auswahl zeigt "Unable to load fonts" an:

  • Aktualisieren Sie die Seite und versuchen Sie es erneut

  • Verwenden Sie alternativ die Head-Code-Methode

Speichern der Konfiguration fehlgeschlagen:

  • Prüfen Sie Ihren Head Code auf Syntaxfehler

  • Entfernen Sie kürzlich hinzugefügten Code und versuchen Sie erneut zu speichern, um das Problem einzugrenzen

Best Practices

  • Schriftstärken begrenzen: Laden Sie nur die Schriftstärken, die Sie tatsächlich verwenden, um die Ladegeschwindigkeit der Seite zu verbessern

  • font-display verwenden: Fügen Sie font-display: swap; hinzu, um unsichtbaren Text während des Ladens der Schriftart zu vermeiden

  • Geräteübergreifend testen: Überprüfen Sie, ob Schriftarten in Desktop- und mobilen Browsern korrekt gerendert werden

  • Fallback-Schriftarten angeben: Geben Sie in Ihren font-family-Deklarationen immer generische Fallbacks an (z. B. sans-serif, serif)

Zusätzliche Ressourcen

War das hilfreich?