Ferndesk
Anpassung

Benutzerdefinierte Schriftarten zu deinem Hilfe-Center hinzufügen

Passe die Typografie deines Hilfe-Centers an deine Markenrichtlinien an, indem du benutzerdefinierte Schriftarten aus Google Fonts oder von selbst gehosteten Quellen hinzufügst.

Typografie-Auswahl (nur Google Fonts)

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

  1. Erweitere Help Center in der Seitenleiste und klicke dann auf Customize

  2. Öffne das Branding-Panel

  3. Scrolle zum Abschnitt Typography

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

  5. Klicke auf Advanced Options, um bestimmte Schriftschnittstärken auszuwählen (Thin bis Black)

  6. Klicke auf Save changes

Die Typografie-Auswahl unterstützt nur Google Fonts. Für Adobe Fonts, benutzerdefinierte Schriftarten oder mehr Kontrolle über die Gestaltung verwendest du die unten beschriebene Methode mit Head Code.

Benutzerdefinierte Schriftarten über Head Code hinzufügen

Für Nicht-Google-Schriftarten oder erweiterte Anpassungen kannst du Embed-Codes für Schriftarten direkt in dein Hilfe-Center einfügen:

Benutzerdefinierter Head Code ist während des Testzeitraums nicht verfügbar. Führe ein Upgrade auf einen kostenpflichtigen Tarif durch, um diese Methode zu verwenden.

Schritt 1: Schriftart finden und Embed-Code abrufen

Google Fonts:

  1. Besuche Google Fonts

  2. Durchsuche die verfügbaren Schriftarten oder suche nach der gewünschten Schriftart

  3. Klicke auf den Namen der Schriftart, um ihre Detailseite anzuzeigen

  4. Klicke auf die Schaltfläche Get font

  5. Kopiere den bereitgestellten <link>-Embed-Code

Das Bild zeigt eine Google-Fonts-Oberfläche im dunklen Design, die in drei Hauptbereiche unterteilt ist: eine linke Seitenleiste, eine obere Navigations-/Suchleiste mit zusätzlichen Filteroptionen und den Hauptinhaltsbereich mit Schriftartvorschauen. Die UI-Elemente sind im Allgemeinen gut definiert, und der Text ist aufgrund des hohen Kontrasts zwischen weißem Text und dunklem Hintergrund gut lesbar. 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 Bezeichnung „Type something“ sowie eine Auswahl für die Schriftgröße, die derzeit auf „40px“ eingestellt ist, mit einem zugehörigen Schieberegler. Der Bereich „Filter“ umfasst ausklappbare Kategorien für „Language“, „Writing system“ und „Feeling“. Unter „Feeling“ gibt es verschiedene interaktive Schaltflächen zum Filtern von Schriftstilen, etwa „Business“, „Fancy“, „Calm“, „Playful“, „Cute“, „Artistic“, „Vintage“ und „Loud“. Ganz unten links befindet sich eine Darstellung von Sonnen-/Mondsymbolen, die vermutlich einen Umschalter für den hellen/dunklen Modus anzeigt. Die obere Leiste zeigt links deutlich das Branding „Google Fonts“, in der Mitte ein Eingabefeld „Search fonts“ mit einem Lupensymbol sowie rechts ein Dropdown „Sort by Trending“ und ganz rechts ein Einkaufstaschensymbol. Unter der Suchleiste ist eine blaue Schaltfläche „X Filters“ sichtbar, die auf einen aktiven Filter hinweist. Rechts neben dem Suchfeld und unter der Schaltfläche „X Filters“ befindet sich ein horizontal scrollbarer Bereich mit Karten und Informationen 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 Hauptinhaltsbereich steht „1899 of 1899 families“ sowie „About these results“ mit Symbolen für die Raster- und Listenansicht. Die Hauptfunktion der Seite besteht darin, verschiedene Schriftfamilien anzuzeigen. Jeder Schriftarteneintrag zeigt den Namen der Schriftart (z. B. „Roboto“, „Noto Sans Syriac“, „Playwrite Česko“), Informationen zu den variablen Achsen sowie den Designer bzw. die Foundry. Unter den Metadaten jeder Schriftart befindet sich eine Vorschau eines Beispieltexts,
Das Bild zeigt eine Google-Fonts-Webseite im dunklen Design mit der 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 Umschalter zwischen hellem und dunklem Modus. Die obere Navigationsleiste enthält das Google-Fonts-Logo, eine Suchleiste mit der Bezeichnung „Search fonts“ und ganz rechts ein Einkaufstaschensymbol. Direkt unter der oberen Navigation werden die Tabs „Specimen“ (derzeit aktiv), „Type tester“, „About“, „License“ und „Glyphs & languages“ angezeigt. Im Hauptbereich wird der Name der Schriftart „Roboto“ in einer großen, fetten Schrift hervorgehoben. Unter dem Namen steht „Designed by Christian Robertson, Paratype, Font Bureau“, wobei diese Namen als anklickbare Links dienen. Eine Reihe grauer, schaltflächenähnlicher Tags beschreibt die Eigenschaften der Schriftart: „Sans Serif - Neo Grotesque“, „Technology - Variable“, „Feeling - Business“, „Feeling - Competent“, „Feeling - Calm“ und „Feeling - Stiff“. Rechts neben dem Namen der Schriftart ist eine blaue Schaltfläche mit der Bezeichnung „Get font“ sichtbar. Diese Schaltfläche wird von einer hellblauen Informationsblase überlagert, die erklärt: „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“ als anklickbarer Link enthalten. Ein großes Textbeispiel in der Schriftart Roboto lautet: „Whereas disregard and contempt for human rights have resulted“. Darunter gibt es Optionen für „Select preview text:“ mit einem Dropdown für „Writing system“ und einem weiteren für „Language“. Weiter unten beginnt ein Abschnitt mit der großen Überschrift „Styles“. Ganz unten befindet sich ein Texteingabefeld, in das Nutzer vermutlich eigenen Vorschautext eingeben können.

Beispiel für Adobe Fonts:

  1. Besuche Adobe Fonts und melde dich an

  2. Durchsuche die Schriftarten und füge sie einem Webprojekt hinzu

  3. Kopiere in den Einstellungen deines Webprojekts den <link>-Embed-Code

Der Screenshot zeigt die Startseite von Adobe Fonts mit einem klaren und modernen Design. Der Hero-Bereich wird von einem markanten roten und blauen Farbverlauf dominiert. Die obere Navigationsleiste vor weißem Hintergrund enthält die

Selbst gehostete Schriftarten:

Erstelle eine @font-face-Regel, die auf deine 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>

Verwende die Formate WOFF2 und WOFF für die beste Browserkompatibilität und Leistung. Hoste die Schriftdateien auf einem zuverlässigen CDN oder deinem eigenen Server.

Schritt 2: Embed-Code zu Head Code hinzufügen

  1. Erweitere Help Center in der Seitenleiste und klicke dann auf Customize

  2. Klicke in der Gruppe Advanced auf Custom Code

  3. Suche den Editor Custom head code

  4. Füge deinen Embed-Code für die Schriftart ein (das <link>-Tag oder den <style>-Block aus Schritt 1)

  5. Klicke auf Save changes

Der Editor „Custom head code“ in der Gruppe „Advanced“, in den du Embed-Codes für Schriftarten und CSS einfügen kannst

Der Head-Code-Editor überprüft die Syntax vor dem Speichern nicht. Teste deinen Code sorgfältig, um zu vermeiden, dass die Gestaltung deines Hilfe-Centers beeinträchtigt wird.

Schritt 3: Schriftart über CSS anwenden

Nachdem du die Schriftart eingebettet hast, füge 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üge dieses CSS in denselben Editor Custom head code ein – entweder innerhalb desselben <style>-Blocks wie deine @font-face-Deklaration oder in einem separaten Block.

Änderungen werden unmittelbar nach dem Speichern wirksam. Besuche dein Live-Hilfe-Center, um zu bestätigen, dass die Schriftarten korrekt angezeigt werden.

Fehlerbehebung

Schriftarten werden nicht geladen:

  • Überprüfe, ob die Syntax des Embed-Codes korrekt ist (keine fehlenden Anführungszeichen oder Klammern).

  • Überprüfe, ob die URLs der Schriftarten öffentlich zugänglich sind (bei selbst gehosteten Schriftarten mit aktiviertem CORS).

  • Stelle sicher, dass die Namen der Schriftfamilien im CSS exakt übereinstimmen (Groß- und Kleinschreibung beachten).

Die Typografie-Auswahl zeigt „Unable to load fonts“ an:

  • Aktualisiere die Seite und versuche es erneut

  • Verwende alternativ die Methode mit Head Code

Speichern der Konfiguration fehlgeschlagen:

  • Überprüfe deinen Head Code auf Syntaxfehler

  • Entferne kürzlich hinzugefügten Code und versuche erneut zu speichern, um das Problem einzugrenzen

Bewährte Vorgehensweisen

  • Schriftschnittstärken begrenzen: Lade nur die Schriftschnittstärken, die du tatsächlich verwendest, um die Ladegeschwindigkeit der Seite zu verbessern

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

  • Auf verschiedenen Geräten testen: Überprüfe, ob die Schriftarten in Desktop- und mobilen Browsern korrekt dargestellt werden

  • Fallback-Schriftarten bereitstellen: Gib in deinen font-family-Deklarationen immer allgemeine Fallbacks an (z. B. sans-serif, serif)

Zusätzliche Ressourcen

War das hilfreich?
War das hilfreich?