Ferndesk
Anpassung

Benutzerdefinierte Schriftarten zu Ihrem Help Center hinzufügen

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

Verwendung der Schriftauswahl (nur Google Fonts)

Für einen schnellen Zugriff auf Google Fonts nutzen Sie die integrierte Schriftauswahl:

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

  2. Öffnen Sie das Panel Branding

  3. Scrollen Sie zum Abschnitt Typografie

  4. Wählen Sie eine Schriftfamilie für die Überschrift oder den Fließtext

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

  6. Klicken Sie auf Änderungen speichern

Die Schriftauswahl 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 via Head-Code

Für Nicht-Google-Schriftarten oder fortgeschrittene Anpassungen fügen Sie Einbettungscodes direkt in Ihr Help 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 dunkle 'Google Fonts'-Benutzeroberfläche, unterteilt in drei Hauptbereiche: eine linke Seitenleiste, eine obere Navigations-/Suchleiste mit Filteroptionen und den Inhaltsbereich mit Schriftvorschauen. Die UI-Elemente sind gut definiert, die Lesbarkeit ist durch den hohen Kontrast zwischen weißem Text und dunklem Hintergrund hoch. Die linke Seitenleiste bietet Navigation mit Icons 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 (40px). Der Bereich 'Filter' zeigt einklappbare Kategorien wie 'Language', 'Writing system' und 'Feeling' (mit Buttons wie 'Business', 'Fancy', 'Calm' etc.). Unten links ist ein Sonnen-/Mond-Icon für den Dark-Mode-Toggle. Die obere Leiste zeigt das Google Fonts Logo, ein Suchfeld, ein Sortier-Dropdown und einen Warenkorb. Darunter zeigen Karten Infos wie 'Readability' oder 'Google Fonts API'. Der Hauptbereich listet 1899 Familien mit Details zu Designern und Schriftnamen (z.B. Roboto).
Das Bild zeigt die Google Fonts Webseite im Dark Mode für die Schriftart 'Roboto'. Oben links befindet sich eine Seitenleiste mit Navigation (Fonts, Noto, Icons, Knowledge, FAQ) und einem Modus-Umschalter. Die obere Leiste enthält das Logo, eine Suche und ein Warenkorbsymbol. Darunter liegen Tabs für 'Specimen', 'Type tester', 'About', 'License' und 'Glyphs & languages'. Der Hauptbereich zeigt den Namen 'Roboto' in fett sowie die Designer. Tags wie 'Sans Serif', 'Variable' und 'Feeling - Business' beschreiben den Stil. Rechts neben dem Namen ist ein blauer 'Get font'-Button mit einer Infoblase zu Einbettungscodes. Ein Textbeispiel in Roboto beginnt mit 'Whereas disregard...'. Unten finden sich Optionen für Vorschauexte und ein Bereich namens 'Styles'.

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 Adobe Fonts Homepage in einem sauberen, modernen Design mit einem rot-blauen Farbverlauf im Hero-Bereich. Die obere Navigationsleiste auf weißem Hintergrund enthält...

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 Performance. Hosten Sie 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 Anpassen

  2. Öffnen Sie das Panel Erweitert

  3. Suchen Sie den Editor für den Benutzerdefinierten Head-Code

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

  5. Klicken Sie auf Änderungen speichern

Der Editor für benutzerdefinierten Head-Code im Panel 'Erweitert', 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 Help Centers nicht zu beeinträchtigen.

Schritt 3: Schriftart via CSS anwenden

Nachdem Sie die Schriftart eingebettet haben, 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 den Benutzerdefinierten Head-Code ein, 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-Help-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 für selbstgehostete Schriftarten)

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

Die Schriftauswahl zeigt "Schriftarten konnten nicht geladen werden" an:

  • Laden Sie die Seite neu 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 Ladezeit der Seite zu verbessern

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

  • 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?