Ferndesk
Anpassung

Benutzerdefinierte Schriftarten zu Ihrem Hilfezentrum hinzufügen

Passen Sie die Typografie Ihres Hilfezentrums an Ihre Markenrichtlinien an, indem Sie benutzerdefinierte Schriftarten aus Google Fonts oder selbst gehosteten Quellen hinzufügen.

Die Typografieauswahl verwenden (nur Google Fonts)

Für den schnellen Zugriff auf Google Fonts verwenden Sie die integrierte Typografieauswahl:

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

  2. Öffnen Sie den Bereich 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 bestimmte Schriftschnitte auszuwählen (Thin bis Black)

  6. Klicken Sie auf Save changes

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

Benutzerdefinierte Schriftarten über Head Code hinzufügen

Für nicht von Google stammende Schriftarten oder erweiterte Anpassungen binden Sie die Einbettungscodes für Schriftarten direkt in Ihr Hilfezentrum ein:

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

Schritt 1: Schriftart finden und Einbettungscode abrufen

Google Fonts:

  1. Besuchen Sie Google Fonts

  2. Durchsuchen Sie die gewünschte Schriftart oder suchen Sie danach

  3. Klicken Sie auf den Namen der Schriftart, um die Detailseite zu öffnen

  4. Klicken Sie auf die Schaltfläche Get font

  5. Kopieren Sie den bereitgestellten Einbettungscode <link>

Das Bild zeigt eine Oberfläche von Google Fonts im Dark Mode, die in drei Hauptbereiche unterteilt ist: eine linke Seitenleiste, eine obere Navigations-/Suchleiste mit zusätzlichen Filteroptionen und einen Hauptinhaltbereich mit Schriftvorschauen. Die UI-Elemente sind insgesamt klar definiert, und die Lesbarkeit des Textes ist dank des hohen Kontrasts zwischen weißem Text und dunklem Hintergrund gut. Die linke Seitenleiste enthält eine primäre Navigation mit Symbolen und Textbezeichnungen wie 'Fonts', 'Noto', 'Icons', 'Knowledge' und 'FAQ'. Darunter befinden sich die Bereiche 'Preview' und 'Filter'. Der Bereich 'Preview' enthält ein Texteingabefeld mit der Beschriftung 'Type something' sowie einen Schriftgrößenwähler, der derzeit auf '40px' eingestellt ist und einen zugehörigen Schieberegler hat. Der Bereich 'Filter' umfasst aufklappbare Kategorien für 'Language', 'Writing system' und 'Feeling'. Unter 'Feeling' gibt es verschiedene interaktive Schaltflächen zum Filtern von Schriftstilen wie 'Business', 'Fancy', 'Calm', 'Playful', 'Cute', 'Artistic', 'Vintage' und 'Loud'. Ganz unten links ist eine Sonne/Mond-Symbolik zu sehen, die wahrscheinlich einen Hell-/Dunkelmodus-Umschalter darstellt. In der oberen Leiste sind links das Branding 'Google Fonts', in der Mitte ein Eingabefeld 'Search fonts' mit einer Lupe und rechts ein Dropdown 'Sort by Trending' sowie ein Einkaufstaschen-Symbol zu sehen. Unter der Suchleiste ist eine blaue Schaltfläche 'X Filters' sichtbar, die auf einen aktiven Filter hinweist. Rechts vom Suchfeld und unter der Schaltfläche 'X Filters' befindet sich ein horizontal scrollender Bereich mit Karten wie 'Readability', 'Material design guidelines', 'Optimize font loading' und 'Google Fonts API'. Ein Pfeil nach rechts deutet darauf hin, dass weitere Karten verfügbar sind. Im Hauptbereich steht '1899 of 1899 families' sowie 'About these results' mit Symbolen für Raster- und Listenansicht. Die Hauptfunktion der Seite besteht darin, verschiedene Schriftfamilien anzuzeigen. Jeder Eintrag zeigt den Namen der Schrift (z. B. 'Roboto', 'Noto Sans Syriac', 'Playwrite Česko'), Informationen zu variablen Achsen sowie Designer/Foundry. Unter den Metadaten jeder Schrift befindet sich eine Vorschau mit Beispieltext, \
Das Bild zeigt eine Webseite von Google Fonts im Dark Mode und präsentiert die Schriftart 'Roboto'. Oben links befindet sich eine Seitenleiste mit Navigationssymbolen und Textbezeichnungen wie 'Fonts', 'Noto', 'Icons', 'Knowledge' und 'FAQ'. Darunter ist ein Sonnensymbol zu sehen, vermutlich für einen Hell-/Dunkelmodus-Umschalter. Die obere Navigationsleiste enthält das Google-Fonts-Logo, eine Suchleiste mit der Beschriftung 'Search fonts' und rechts außen ein Einkaufstaschen-Symbol. Auffällig unter der oberen Navigation sind Registerkarten für 'Specimen' (derzeit aktiv), 'Type tester', 'About', 'License' und 'Glyphs & languages'. Der Hauptbereich hebt den Schriftartnamen 'Roboto' in einer großen, fetten Schrift hervor. Darunter steht 'Designed by Christian Robertson, Paratype, Font Bureau', wobei diese Namen als anklickbare Links dargestellt sind. Eine Reihe grauer, schaltflächenähnlicher Tags beschreibt die Eigenschaften der Schrift: 'Sans Serif - Neo Grotesque', 'Technology - Variable', 'Feeling - Business', 'Feeling - Competent', 'Feeling - Calm' und 'Feeling - Stiff'. Rechts vom Schriftartnamen ist eine blaue Schaltfläche mit der Aufschrift 'Get font' sichtbar. Über dieser Schaltfläche liegt eine hellblaue Informationsblase mit dem Hinweis: 'Click here to download this font, get its embed code, and find out how to use it in apps and products.' In dieser Blase ist 'Got it' ein anklickbarer Link. Ein großer Textbeispielsatz in der Schrift Roboto lautet: 'Whereas disregard and contempt for human rights have resulted'. Darunter gibt es Optionen zur Auswahl von 'Select preview text:' mit einem Dropdown für 'Writing system' und einem weiteren für 'Language'. Weiter unten wird ein Abschnitt mit dem Titel 'Styles' in großer Schrift angezeigt. Ganz unten befindet sich ein Texteingabefeld, vermutlich damit Nutzer ihren eigenen Vorschautext eingeben können.

Adobe Fonts Beispiel:

  1. Besuchen Sie Adobe Fonts und melden Sie sich an

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

  3. Kopieren Sie in den Einstellungen Ihres Webprojekts den Einbettungscode <link>

Das Screenshot zeigt die Startseite von Adobe Fonts, die sich durch ein klares und modernes Design mit einem dominanten rot-blauen Farbverlauf im Hero-Bereich auszeichnet. 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 die beste Browser-Kompatibilität und Leistung. Hosten Sie Schriftdateien auf einem zuverlässigen CDN oder auf Ihrem eigenen Server.

Schritt 2: Einbettungscode zum Head Code hinzufügen

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

  2. Öffnen Sie den Bereich Advanced

  3. Suchen Sie den Editor Custom head code

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

  5. Klicken Sie auf Save changes

Der Editor für benutzerdefinierten Head Code im Bereich Advanced, in den Sie Einbettungscodes für Schriftarten und CSS einfügen können

Der Head-Code-Editor überprüft die Syntax vor dem Speichern nicht. Testen Sie Ihren Code sorgfältig, um zu vermeiden, dass das Styling Ihres Hilfezentrums beschädigt wird.

Schritt 3: Schriftart per CSS anwenden

Nachdem Sie die Schrift 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 Editor Custom head code ein, entweder innerhalb desselben <style>-Blocks wie Ihre @font-face-Deklaration oder in einem separaten Block.

Die Änderungen werden sofort nach dem Speichern wirksam. Besuchen Sie Ihr Live-Hilfezentrum, 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 (bei selbst gehosteten Schriftarten CORS aktiviert)

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

Die Typografieauswahl zeigt "Unable to load fonts" an:

  • Aktualisieren Sie die Seite und versuchen Sie es erneut

  • Verwenden Sie alternativ die Head-Code-Methode

Konfiguration speichern fehlgeschlagen:

  • Überprü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

  • Schriftschnitte begrenzen: Laden Sie nur die Schriftschnitte, 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 Schrift zu verhindern

  • Auf allen Geräten testen: Vergewissern Sie sich, dass Schriftarten auf Desktop- und Mobilbrowsern korrekt dargestellt werden

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

Zusätzliche Ressourcen

War das hilfreich?
War das hilfreich?