Zum Hauptinhalt
HubSpot Wissensdatenbank
Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.

Benutzerdefinierte Schriftarten in HubSpot

Zuletzt aktualisiert am: 18 Mai 2026

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Die Schriftarten in HubSpot sind je nach Content-Typ und Schriftart auf unterschiedliche Weise verfügbar. Einige Standardschriftarten sind in allen Content-Editoren verfügbar. Webschriftarten und benutzerdefinierte Schriftarten müssen möglicherweise zu Designeinstellungen, Stylesheets, benutzerdefinierten Modulen oder Code-Vorlagen hinzugefügt werden.

Bevor Sie loslegen

Bevor Sie mit der Verwendung von Schriftarten in HubSpot beginnen, sollten Sie die Anforderungen und Überlegungen überprüfen.

Berechtigungen erforderlich Je nachdem, wo die Schriftart verwendet wird, benötigt ein Benutzer möglicherweise zusätzliche Berechtigungen:

Einschränkungen und Wissenswertes

  • Nicht alle Inhaltstypen sind in allen Accounts verfügbar. Um zu erfahren, welche Inhaltstypen für Ihr Abonnement verfügbar sind, sehen Sie sich die Übersicht der Produkte & und Dienstleistungen an.
  • In der folgenden Tabelle sehen Sie, welche Schriftartoptionen für die einzelnen Inhaltstypen verfügbar sind:
Inhaltstyp Schriftarttyp  
  Standardschriftarten Webschriftarten

Benutzerdefinierte Schriftarten

  
Seite – Designvorlagen ✓ Verfügbar in den Design-Einstellungen und über das Stylesheet ✓  
Seite – kodierte Vorlage ✓ Verfügbar über Stylesheet oder benutzerdefiniertes Modul Verfügbar über Stylesheet  
Blog ✓ Verfügbar über Stylesheet oder benutzerdefiniertes Modul ✓  
E-Mail Einige Standardschriftarten sind im Drag-&-Drop-E-Mail-Editor nicht verfügbar Verfügbar nur für benutzerdefinierte E-Mail-Code-Vorlagen; wird von den meisten E-Mail-Clients nicht unterstützt Verfügbar nur für benutzerdefinierte E-Mail-Code-Vorlagen; wird von den meisten E-Mail-Clients nicht unterstützt  
Wissensdatenbank Schriftarten können im Artikel-Editor nicht angepasst werden Verfügbar in den Designeinstellungen  Verfügbar in den Designeinstellungen  
Benutzerdefiniertes Modul ✓ Verfügbar für benutzerdefinierte Module, die nicht in E-Mails verwendet werden Verfügbar für benutzerdefinierte Module, die nicht in E-Mails verwendet werden  
CTA (alt) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

Standardschriftarten in Rich-Text-Modulen verwenden

Standardschriftarten werden in allen HubSpot-Inhalten unterstützt. Die verfügbaren Optionen und wo Sie sie anwenden können, hängen jedoch vom Inhaltstyp ab.

  1. Gehen Sie zu Ihrem Content:

  2. Klicken Sie auf den Namen Ihres Contents.
  3. Klicken Sie im Content-Editor auf ein Rich-Text-Modul und markieren Sie dann den Text, den Sie bearbeiten möchten. 
  4. Klicken Sie in der Rich-Text-Symbolleiste auf das Dropdown-Menü Schriftart und wählen Sie Schriftart aus. Die folgenden Schriftarten sind in Rich-Text-Modulen verfügbar:
Standardschriftarten
Marken-Schriftarten Merriweather
Andale Mono Monaco
Arial Symbol
Book Antiqua Tahoma
Courier New Terminal
Georgia Times New Roman
Helvetica Trebuchet MS
Impact Verdana
Lato  
Standardschriftarten
Arial Merriweather*
Courier New Tahoma
Georgia Times New Roman
Helvetica Trebuchet MS
Lato* Verdana
* Nur als Webschriftart im Drag-&-Drop-E-Mail-Editor verfügbar.

 

Webschriftarten verwenden

Webschriftarten werden in einigen HubSpot-Inhalten unterstützt, sie sind jedoch nicht im Dropdown-Menü Schriftart im Rich-Text-Editor verfügbar. Je nach Inhaltstyp können Webschriftarten in Designeinstellungen, Stylesheets, benutzerdefinierten Modulen oder Code-Vorlagen angewendet werden. 

Entwickler können das Schriftartfeld verwenden, um Webschriftarten zu Designs und benutzerdefinierten Modulen hinzuzufügen. Wenn Webschriftarten auf diese Weise hinzugefügt werden, werden sie von HubSpot direkt in die Domain des Inhalts geladen, anstatt sie von einem Drittanbieterdienst zu laden.

Nutzen Sie Drittanbieterdienste wie Google Fonts , indem Sie den Importcode der Schriftart kopieren, ihn in das Stylesheet der Inhalte einfügen und die Schriftart dann per CSS anwenden:

  1. Gehen Sie zu fonts.google.com.
  2. Geben Sie in der Suchleiste den Namen einer Schriftart ein. 
  3. Klicken Sie auf den Namen der Schriftart, um eine Liste der für den Import verfügbaren Stile anzuzeigen.
  4. Klicken Sie oben rechts auf Schriftart abrufen.
  5. Klicken Sie oben rechts auf Einbettungscode abrufen.
  6. Wählen Sie in der rechten Spalte auf der Registerkarte Web die Option @import aus.
  7. Kopieren Sie den @import Code ohne das -Tag <style> .
  8. Kopieren Sie den  CSS-Klassencode zum Festlegen von CSS-Regeln. 

Auf der Seite Google Fonts wird die Registerkarte Web zum Einbetten einer Google Font angezeigt. Um den Einbettungscode und die Schaltfläche "Code kopieren" für die CSS-Klasse wird ein Feld platziert.

  1. Nachdem Sie den Code aus Google Fonts kopiert haben, können Sie die Schriftart zu Ihren HubSpot-Inhalten hinzufügen: 

Eine Google-Schriftart in einem Stylesheet verwenden

  1. Kopieren Sie den @import-Code der Schriftart aus Google Fonts.
  2. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  3. Öffnen Sie im Finder das für Ihre Inhalte verwendete Stylesheet.
  4. Fügen Sie den @import Code in Zeile 1 des Stylesheets ein. 
  5. Fügen Sie den Code zum Festlegen von CSS-Regeln zu den entsprechenden Selektoren im Stylesheet hinzu.
  6. Klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen zu veröffentlichen. 
Im Design-Manager wird eine CSS-Datei angezeigt. Im Code-Editor befindet sich oben in der Datei ein Google Font-Importcode, gefolgt von CSS-Regeln für die entsprechenden Selektoren im Stylesheet.

Eine Google-Schriftart in einer benutzerdefinierten E-Mail-Vorlage verwenden

Google Fonts werden in Apple Mail und einigen anderen E-Mail-Clients unterstützt, aber eine breite Unterstützung ist begrenzt. Die gängigsten E-Mail-Clients unterstützen nur Standardwebschriftarten. Erfahren Sie mehr über die Auswahl der Standardschriftarten, die im klassischen E-Mail-Editor verwendet werden. 

Abonnement erforderlich Um E-Mail-Vorlagen auf Basis von benutzerdefiniertem Code zu erstellen, ist ein Marketing Hub Professional - oder Enterprise-Abonnement erforderlich.


So fügen Sie eine Google-Schriftart zu einer benutzerdefinierten E-Mail-Vorlage hinzu: 

  1. Kopieren Sie den @import-Code der Schriftart aus Google Fonts.
  2. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  3. Öffnen Sie im Finder die benutzerdefinierte E-Mail-Code-Vorlage.
  4. Fügen Sie im <head>-Abschnitt der Vorlage den @import-Code zwischen den <style>....</style>-Tags ein. 
  5. Fügen Sie im <body> -Abschnitt der Vorlage die benutzerdefinierte Schriftart im Inline-Styling hinzu. 
  6. Klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen zu veröffentlichen. 

Eine Google-Schriftart in einem CTA (alt) verwenden

  1. Kopieren Sie den Code von Google für das Festlegen der CSS-Regeln für diese Schriftart.
  2. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf CTAs.
  3. Bewegen Sie den Mauszeiger über einen CTA und klicken Sie dann auf Aktionen > Bearbeiten. 
  4. Klicken Sie in der rechten Ansicht auf Erweiterte Optionen. 
  5. Fügen Sie in das Textfeld den Code von Google für das Festlegen der CSS-Regeln für diese Schriftart ein. 
  6. Klicken Sie unten rechts auf Weiter. Klicken Sie dann auf Speichern.

Eine Google-Schriftart in einem Formular verwenden

  1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf Formulare.
  2. Bewegen Sie den Mauszeiger über den Formularnamen und klicken Sie auf "Aktionen > " Formular bearbeiten oder "Neues Formular erstellen".
  3. Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau. 
  4. Klicken Sie im Menü der linken Seitenleiste auf den Abschnitt Stil.
  5. Klicken Sie im Abschnitt Text auf das Dropdown-Menü Schriftartfamilie und wählen Sie eine Google-Schriftart aus. 
  6. Klicken Sie oben rechts auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu veröffentlichen. 

Eine Google-Schriftart in einem benutzerdefinierten Modul verwenden

Bitte beachten: Google Fonts sind für benutzerdefinierte Module, die in E-Mail-Vorlagen verwendet werden, nicht verfügbar.

  1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  2. Klicken Sie im Finder auf den Namen eines benutzerdefinierten Moduls. Erfahren Sie mehr darüber, wie Sie ein benutzerdefiniertes Modul erstellen.
  3. Klicken Sie im Inspektor im Abschnitt Felder auf das Dropdown-Menü Feld hinzufügen und wählen Sie Schriftart aus. Erfahren Sie mehr über das Arbeiten mit Schriftartfeldern.
Im Design-Manager wird der Inspektor für ein benutzerdefiniertes Modul angezeigt. Um das Dropdown-Menü Feld hinzufügen im Abschnitt Felder wird ein Feld platziert.
  1. Klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen zu veröffentlichen. 
  2. Gehen Sie zu Ihrem Content:
  3. Klicken Sie auf den Namen des Inhalts, in dem das benutzerdefiniertes Modul verwendet wird. 
  4. Klicken Sie im Content-Editor auf das benutzerdefinierte Modul. 
  5. Klicken Sie im Seitenleisten-Editor auf das Dropdown-Menü Schriftart und wählen Sie eine Google-Schriftart aus. 

Benutzerdefinierte Schriftarten verwenden

Als Alternative zur Verwendung von Standardwebschriften oder einer Schriftartbibliothek wie Google Fonts können Sie Schriftartdateien hochladen und sie dann in Designs verwenden oder in Stylesheets referenzieren. 

Benutzerdefinierte Schriftarten in Designs verwenden

Laden Sie im Design-Editor eine benutzerdefinierte Schriftart hoch und verwenden Sie diese dann in Seiten und Beiträgen. Schriftartdateien werden in den folgenden Formaten unterstützt: TTF, OTF, WOFF.

Benutzerdefinierte Schriftarten für Seiten oder Beiträge hochladen

Nachdem Sie benutzerdefinierte Schriftarten hochgeladen haben, stehen sie für Seiten, Beiträge oder Wissensdatenbank-Artikel zur Verfügung.

  1. Gehen Sie zu Ihrem Content:

  2. Klicken Sie auf den Namen Ihres Contents. 
  3. Klicken Sie im Content-Editor auf das Menü Bearbeiten und wählen Sie Design: [Name des Designs] aus.
  4. Klicken Sie in der linken Seitenleiste auf ein Dropdown-Menü für eine beliebige Schriftart und wählen Sie Markenschriftarten verwalten aus.
  5. Befolgen Sie die Schritte in diesem Wissensdatenbankartikel , um Ihre Schriftarten hinzuzufügen oder zu bearbeiten.

Benutzerdefinierte Schriftarten für Wissensdatenbankartikel hochladen

Nachdem Sie benutzerdefinierte Schriftarten hochgeladen haben, stehen sie für Seiten, Beiträge oder Wissensdatenbank-Artikel zur Verfügung.

  1. Klicken Sie in Ihrem HubSpot-Account auf Service und dann auf Wissensdatenbank.
  2. Klicken Sie oben rechts auf die Schaltfläche Vorlage anpassen.
  3. Klicken Sie in der linken Seitenleiste auf die Registerkarte Design.
  4. Klicken Sie in der linken Seitenleiste auf Schriftarten.
  5. Klicken Sie auf ein beliebiges Schriftart-Dropdown-Menü und wählen Sie Markenschriftarten verwalten aus.
  6. Befolgen Sie die Schritte in diesem Wissensdatenbankartikel , um Ihre Schriftarten hinzuzufügen oder zu bearbeiten.

Benutzerdefinierte Schriftarten bearbeiten

Nachdem Sie eine benutzerdefinierte Schriftart in den Design-Editor hochgeladen haben, können Sie weitere Schriftarten hochladen, vorhandene Schriftarten mit zusätzlichen Schriftarten anpassen oder Schriftarten löschen.

Benutzerdefinierte Schriftarten in Stylesheets verwenden

Als Alternative zu standardmäßigen Web-Schriftarten oder einer Schriftartenbibliothek wie Google Fonts können Sie Schriftartdateien im Dateien-Tool hosten und diese dann in Ihrem Stylesheet referenzieren. 

Bitte beachten: Benutzerdefinierte Schriftarten sind nur in Accounts mit Zugriff auf den Design-Manager verfügbar und müssen mit CSS angewendet werden. Durch das Hinzufügen einer benutzerdefinierten Schriftart wird die Schriftart nicht den Dropdown-Menüs für Stile im Content-Editor hinzugefügt.

Um eine Schriftart in Inhalten zu verwenden, laden Sie die Dateien der Schriftart in das Dateien-Tool hoch. Es wird empfohlen, mindestens die .woff-, .ttf- und .eot-Versionen der Schriftart hochzuladen, um sicherzustellen, dass Ihre Schriftarten in allen Browsern geladen werden. Sie können den Expertenmodus des Font Squirrel Konverter-Tools verwenden, um weitere Dateiformate zu generieren.

  1. Gehen Sie in Ihrem HubSpot-Account zu Content > Datei-Manager. Falls Sie HubSpots kostenlose Tools verwenden, gehen Sie zu Marketing > E-Mail. Klicken Sie dann oben rechts auf E-Mail-Tools und wählen Sie die Option Dateien.
  2. Klicken Sie auf Dateien hochladen.
  3. Wählen Sie auf der Festplatte Ihres Computers die Schriftarten-Dateien aus und klicken Sie dann auf Öffnen.
  4. Klicken Sie auf den Namen einer hochgeladenen Schriftart-Datei.
  5. Klicken Sie im rechten Bereich auf URL kopieren, um die URL zu kopieren, unter der die Datei gehostet wird. Sie benötigen die URL für die Schriftart in jedem Dateiformat.

Benutzerdefinierte Schriftart in einem Stylesheet verwenden

Nachdem Sie eine benutzerdefinierte Schriftart zum Dateien-Tool hinzugefügt haben, können Sie sie in einem Stylesheet referenzieren. Für jeden Stil der Schriftart (kursiv, fett usw.) ist eine eigene @font-face-Regel erforderlich. Erfahren Sie mehr über das Arbeiten mit Stylesheets in HubSpot. 

  1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  2. Öffnen Sie im Finder das für Ihre Inhalte verwendete Stylesheet.
  3. Für jeden Stil der Schriftart: 
    • Fügen Sie oben im Stylesheet den folgenden Code ein: 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

    • Ersetzen Sie Name Ihrer Schriftart mit dem Namen der Schriftart.
    • Ersetzen Sie Schriftartdatei.xxx? mit der URL aus dem Dateien-Tool. Wiederholen Sie dies für jedes Dateiformat.
  1. Erstellen Sie CSS-Regeln mit der Eigenschaft font-family, um die benutzerdefinierte Schriftart anzuwenden. 
  2. Klicken Sie oben rechts auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu veröffentlichen. 

Benutzerdefinierte Schriftart in einer benutzerdefinierten E-Mail-Code-Vorlage verwenden

Benutzerdefinierte Schriftarten werden in den beliebtesten E-Mail-Clients nicht unterstützt. Wir empfehlen, Standardwebschriftarten in E-Mails zu verwenden, um eine gleichbleibende Erfahrung für Ihre Leser zu gewährleisten. Wenn Sie jedoch eine benutzerdefinierte Schriftart zu einer benutzerdefinierten E-Mail-Code-Vorlage hinzufügen möchten, müssen Sie zunächst die benutzerdefinierte Schriftart zum Dateien-Tool hinzufügen.

  1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  2. Klicken Sie im Finder auf den Namen Ihrer benutzerdefinierten E-Mail-Vorlage.
  3. Für jeden Stil der Schriftart:
    • Fügen Sie diesen Code in den <head> -Abschnitt der Vorlage <style>zwischen den ...</style> .-Tags ein: 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

    • Ersetzen Sie Name Ihrer Schriftart mit dem Namen der Schriftart.
    • Ersetzen Sie ihreschriftartdatei.xxx? mit der URL aus dem Dateien-Tool. Wiederholen Sie dies für jedes Dateiformat. 
  1. Fügen Sie im Code des E-Mail-Textes die benutzerdefinierte Schriftart im Inline-Styling hinzu. 
  2. Klicken Sie oben rechts auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu veröffentlichen. 

Benutzerdefinierte Schriftart in einem CTA verwenden

Nachdem Sie eine benutzerdefinierte Schriftart zu Ihrem Design hinzugefügt haben, können Sie sie für CTAs verwenden.

  1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf CTAs.
  2. Klicken Sie oben links auf das Dropdown-Menü und wählen Sie CTAs aus.
  3. Bewegen Sie den Mauszeiger über einen CTA und klicken Sie dann auf Aktionen > Bearbeiten. 
  4. Klicken Sie im linken Bereich des CTA-Editors auf die Registerkarte Design. 
  5. Klicken Sie auf den Abschnitt Stile, um ihn zu erweitern.
  6. Klicken Sie auf das Dropdown-Menü Primäre Schriftart und wählen Sie Ihre benutzerdefinierte Schriftart aus. 
  7. Fahren Sie mit dem Erstellen Ihres CTA fort. 

Eine benutzerdefinierte Schriftart in einem CTA (alt) verwenden

Verwenden Sie ähnlich wie bei CTAs nach dem Hochladen einer benutzerdefinierten Schriftartdatei diese mit älteren CTAs.

  1. Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing und klicken Sie dann auf CTAs.
  2. Bewegen Sie den Mauszeiger über einen CTA und klicken Sie dann auf Aktionen > Bearbeiten. 
  3. Klicken Sie in der rechten Ansicht auf Erweiterte Optionen. 
  4. Fügen Sie diesen Code in das Textfeld ein:

    font-family: 'Your Font Name';
  5. Ersetzen Sie Name Ihrer Schriftart mit dem Namen der Schriftart.
  6. Klicken Sie unten rechts auf Weiter. Klicken Sie dann auf Speichern.

Benutzerdefinierte Schriftart in einem benutzerdefinierten Modul verwenden

Nachdem Sie eine benutzerdefinierte Schriftart zum Dateien-Tool hinzugefügt haben, können Sie sie in benutzerdefinierten Blog- oder Seitenmodulen verwenden. Erfahren Sie, wie Sie eine Google-Schriftart zu einer benutzerdefinierten E-Mail-Code-Vorlage hinzufügen. 

  1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  2. Klicken Sie im Finder auf den Namen des benutzerdefinierten Moduls.
  3. Fügen Sie im Modul-Editor für den module.css Abschnitt den folgenden Code ein:

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

    • Ersetzen Sie Name Ihrer Schriftart mit dem Namen der Schriftart.
    • Ersetzen Sie ihreschriftartdatei.xxx? mit der URL aus dem Dateien-Tool. Wiederholen Sie dies für jedes Dateiformat.
  2. Erstellen Sie CSS-Regeln mit der Eigenschaft font-family, um die benutzerdefinierte Schriftart anzuwenden. 
  3. Klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen zu veröffentlichen. 
War dieser Artikel hilfreich?
Dieses Formular wird nur verwendet, um Feedback zur Dokumentation zu sammeln. Erfahren Sie, wie Sie Hilfe bei Fragen zu HubSpot erhalten können.
Inhalt Menü

Verwandte Artikel

New to HubSpot? Use these guides to get started.