Ferndesk
Anpassung

Eigene 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 selbst gehosteten Quellen hinzufügen.

Verwendung der Typografie-Auswahl (nur Google Fonts)

Für den schnellen Zugriff auf Google Fonts verwenden Sie die integrierte Typografie-Auswahl:

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

  2. Öffnen Sie das Branding-Panel

  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 auszuwählen (Thin bis Black)

  6. Klicken Sie auf Save changes

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

Hinzufügen benutzerdefinierter Schriftarten via Head-Code

Für Nicht-Google-Schriften oder fortgeschrittene Anpassungen fügen Sie Schrift-Einbettungscodes direkt in Ihr Help Center ein:

Benutzerdefinierter Head-Code ist während der Testphase nicht verfügbar. Aktualisieren Sie auf einen kostenpflichtigen Plan, um diese Methode zu nutzen.

Schritt 1: Finden Sie Ihre Schriftart und rufen Sie den Einbettungscode ab

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', die in drei Hauptbereiche unterteilt ist: eine linke Seitenleiste, eine obere Navigations-/Suchleiste mit Filtern und den Hauptinhaltsbereich mit Schriftvorschauen. Die UI-Elemente sind gut definiert, der Text ist kontrastreich in Weiß auf dunklem Grund lesbar. Die linke Leiste bietet Navigation zu 'Fonts', 'Noto', 'Icons', 'Knowledge' und 'FAQ'. Darunter befinden sich Abschnitte für 'Preview' und 'Filter' mit einem Texteingabefeld, einem Schriftgrößenregler (40px) und einklappbaren Kategorien wie Sprache und 'Feeling' (mit Schaltflächen wie Business, Playful, etc.). Die obere Leiste zeigt das Branding, die Suche und einen Warenkorb. Im Hauptbereich werden '1899 von 1899 Familien' angezeigt, sortiert in Raster- oder Listenansicht mit Details zu Designern und Achseninformationen.
Das Bild zeigt die Google Fonts Webseite im Dark Mode mit der Schriftart 'Roboto'. Oben links befindet sich eine Seitenleiste mit Symbolen für Schriftarten, Wissen und FAQ sowie einem Toggle für den Dark Mode. Die Navigationsleiste enthält das Logo, ein Suchfeld und einen Warenkorb. Unter der Navigation befinden sich Tabs wie 'Specimen', 'About' und 'License'. Der Name 'Roboto' ist groß und fett hervorgehoben, darunter stehen die Designer. Tags beschreiben Merkmale wie 'Sans Serif' und 'Business'. Rechts ist ein blauer 'Get font'-Button mit einer Infoblase zu Downloads und Einbettungscodes zu sehen. Ein Beispieltext zeigt die Schriftanwendung, darunter folgen Auswahloptionen für Schriftsysteme und eine Sektion für verschiedene Styles.

Adobe Fonts Beispiel:

  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 mit einem klaren, modernen Design und einem markanten rot-blauen Farbverlauf im Header-Bereich. Die obere Navigationsleiste auf weißem Hintergrund enthält die...

Selbst gehostete 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 beste Browserkompatibilität und Performance. Hosten Sie Schriftdateien auf einem zuverlässigen CDN oder Ihrem eigenen Server.

Schritt 2: Den Einbettungscode zum Head-Code hinzufügen

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

  2. Öffnen Sie das Advanced-Panel

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

  4. Fügen Sie Ihren Schrift-Einbettungscode ein (den <link>-Tag oder <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 Help Centers nicht zu beeinträchtigen.

Schritt 3: Die 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 in denselben Custom head code-Editor 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 bei selbst gehosteten Schriften)

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

Typografie-Auswahl zeigt "Unable to load fonts":

  • Aktualisieren Sie die Seite und versuchen Sie es erneut

  • Verwenden Sie als Alternative die Head-Code-Methode

Speichern der Konfiguration fehlgeschlagen:

  • Suchen Sie nach Syntaxfehlern in Ihrem Head-Code

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

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

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

Zusätzliche Ressourcen

War das hilfreich?