Zum Hauptinhalt
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: Oktober 3, 2024

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

Alle

Die für Inhalte in HubSpot verfügbaren Schriftarten hängen vom Typ des Inhalts und dem Schriftarttyp ab. Bestimmte Standardschriftarten sind in allen Content-Editoren verfügbar, während für Webschriftarten (wie Google Fonts) und benutzerdefinierte Schriftarten zusätzliche Einschränkungen gelten, siehe unten: 

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 Verfügbar auf der Registerkarte Design des Vorlageneditors Nicht verfügbar  
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  

Bitte beachten: Nicht alle Inhaltstypen sind in allen Accounts verfügbar. Die für die Abonnements in Ihrem HubSpot-Account verfügbaren Inhaltstypen finden Sie in der Übersicht der Produkte und Dienstleistungen von HubSpot

Standardschriftarten verwenden

Standardschriftarten können in beliebigen Inhalten verwendet werden und sind so konzipiert, dass sie auf den meisten Plattformen und Geräten geladen werden können. 

  • Gehen Sie zu Ihrem Inhalt:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
    • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
    • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
    • Wissensdatenbank: Gehen Sie in Ihrem HubSpot-Account zu Content > Wissensdatenbank.
    • E-Mail: Navigieren Sie in Ihrem HubSpot Account zu Marketing > Marketing-E-Mails.
  • Klicken Sie auf den Namen Ihres Inhalts. 
  • Klicken Sie im Content-Editor auf ein Rich-Text-Modul und markieren Sie dann den Text, den Sie bearbeiten möchten. 
  • 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: 
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

* Im Drag-&-Drop-E-Mail-Editor nicht verfügbar. 

** Nur als Webschriftart im Drag-&-Drop-E-Mail-Editor verfügbar.

Webschriftarten verwenden

Webschriftarten sind standardmäßig im Content-Editor für Seiten verfügbar, die Starter-Vorlagen und Designs verwenden, sowie für Wissensdatenbank-Artikel und benutzerdefinierte Module.

Wenn Sie ein Entwickler sind, können Sie das Schriftartfeld auch verwenden, um Webschriftarten zu Designs und benutzerdefinierten Modulen hinzuzufügen. Bei dieser Art der Verwendung werden die Webschriftarten nicht von einem Drittanbieter-Service geladen. Stattdessen lädt HubSpot sie direkt auf der Domain der Inhalte.

Bitte beachten: Webschriftarten können nicht im Schriftart-Dropdown-Menü des Rich-Text-Editors ausgewählt werden. 

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

  • Gehen Sie zu fonts.google.com.
  • Geben Sie in der Suchleiste den Namen einer Schriftart ein. 
  • Klicken Sie auf den Namen der Schriftart, um eine Liste der für den Import verfügbaren Stile anzuzeigen.
  • Klicken Sie neben jedem Stil, den Sie importieren möchten, auf + Diesen Stil auswählen.
  • Wählen Sie im rechten Bereich im Abschnitt Im Web verwenden die Option @import aus. 
  • Kopieren Sie den Code der Schriftart: 
    • Kopieren Sie im Abschnitt Im Web verwenden den @import-Code ohne das <style>-Tag.
    • Kopieren Sie in das Feld CSS-Regeln zum Angeben von Familien den Code für die Festlegung von CSS-Regeln. 

copy-google-font

Sobald Sie den Code von Google Fonts haben, können Sie die Schriftart zu Ihren HubSpot-Inhalten hinzufügen: 

Google-Schriftart in einem Stylesheet verwenden

add-google-fonts-imported-font-to-stylesheet

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

Obwohl Google Fonts von Apple Mail und einigen anderen E-Mail-Clients unterstützt werden, fehlt eine breite Unterstützung. Die meisten gängigen E-Mail-Clients unterstützen nur Standardwebschriftarten. Erfahren Sie mehr über Auswahl der Standardschriftarten, die im klassischen E-Mail-Editorverwendet werden. 
 
Benutzerdefinierte E-Mail-Code-Vorlagen sind nur in Accounts mit einem Marketing Hub Professional - oder Enterprise-Abonnement verfügbar. 
 
So fügen Sie eine Google-Schriftart zu einer benutzerdefinierten E-Mail-Vorlage hinzu: 

Eine Google-Schriftart in einem CTA (alt) verwenden

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

Google-Schriftart in einem Formular verwenden

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

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.


  • Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.

click-add-field

  • Klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen zu veröffentlichen. 
  • Gehen Sie zu Ihrem Inhalt:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
    • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
    • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
  • Klicken Sie auf den Namen des Inhalts, in dem das benutzerdefiniertes Modul verwendet wird. 
  • Klicken Sie im Content-Editor auf das benutzerdefinierte Modul
  • 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 Standard-Webschriften 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

Im Design-Editor können Sie eine benutzerdefinierte Schriftart hochladen und diese dann in Seiten und Beiträgen verwenden. Schriftartdateien werden in den folgenden Formaten unterstützt: TTF, OTF, WOFF.

Benutzerdefinierte Schriftarten hochladen

  • Gehen Sie zu Ihrem Inhalt:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
    • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
    • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
  • Klicken Sie auf den Namen Ihres Inhalts. 
  • Klicken Sie im Content-Editor auf das Menü Bearbeiten und wählen Sie Design: [Name des Designs] aus.
  • Klicken Sie in der linken Seitenleiste auf ein Schriftart-Dropdown-Menü und wählen Sie Benutzerdefinierte Schriftart hochladen aus. 
  • Geben Sie im rechten Bereich im Feld Schriftartname ein Label für Ihre Schriftart ein. 
  • Klicken Sie auf Schriftartdateien auswählen und wählen Sie eine oder mehrere Schriftartdateien aus, dann klicken Sie auf Weiter

add-a-custom-font-to-theme

  • Klicken Sie auf das Dropdown-Menü Schriftartstil 1 und wählen Sie den Stil aus, den Ihre Schriftdatei verwendet. Für jeden Stil muss eine eigene Schriftartdatei verwendet werden. 
  • Um weitere Schriftartstile hinzuzufügen, klicken Sie auf + Weiteren Schriftartstil hinzufügen und fügen Sie dann Ihre Schriftartstile hinzu. Jede hochgeladene Schriftartdatei muss mindestens einen zugehörigen Stil haben. 
  • Wenn Sie alle zutreffenden Schriftartstile hinzugefügt haben, klicken Sie auf Fertig.

Benutzerdefinierte Schriftarten bearbeiten

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

  • Gehen Sie zu Ihrem Inhalt:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
    • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
    • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
  • Klicken Sie auf den Namen Ihres Inhalts. 
  • Klicken Sie im Content-Editor auf das Menü Bearbeiten und wählen Sie Design: [Name des Designs] aus.
  • Klicken Sie in der linken Seitenleiste auf den Abschnitt Schriftarten, um ihn zu erweitern.
  • Klicken Sie auf ein Schriftart-Dropdown-Menü und wählen Sie Benutzerdefinierte Schriftarten verwalten aus.
  • Um eine neue Schriftart hinzuzufügen, klicken Sie im Dialogfeld auf Benutzerdefinierte Schriftart hinzufügen
  • So bearbeiten Sie eine Schriftart:
    • Klicken Sie im Dialogfeld auf das Dropdown-Menü Aktionen neben der Schriftart und wählen Sie Bearbeiten aus.
    • Um den Namen der Schriftart zu ändern, klicken Sie auf neben dem Namen der Schriftart Name bearbeiten und geben dann einen neuen Schriftartnamen ein. 
    • Um weitere Schriftartstile hinzuzufügen, klicken Sie auf Weiteren Schriftartstil hinzufügen. Klicken Sie dann auf das Dropdown-Menü Schriftartstil und wählen Sie einen Stil aus. Klicken Sie auf Hochladen und laden Sie dann eine Schriftartdatei hoch. 
    • Um einen Schriftartstil zu löschen, klicken Sie auf das deletededel lPapierkorb-Symol neben dem Schriftartstil. Sie können einen Schriftartstil nicht löschen, wenn keine anderen Schriftartstile aufgeführt sind. 
    • Klicken Sie auf Speichern
  • Um eine Schrift zu löschen, klicken Sie im Dialogfeld auf das Dropdown-Menü Aktionen und wählen Sie Löschen aus. 

Bitte beachten: Wenn Sie eine Schriftart löschen, wird sie von allen Dropdown-Menüs entfernt, aber die Schriftartdateien verbleiben im Dateien-Tool, bis sie dort gelöscht werden. 


  • Wenn Sie mit das Bearbeiten Ihrer Schriftarten abgeschlossen haben, klicken Sie auf Fertig.

Benutzerdefinierte Schriftarten in Stylesheets verwenden

Alternativ zur Verwendung von Standard-Webfonts oder einer Schriftbibliothek wie Google Fonts können Sie Schriftdateien im Datei-Tool hosten und 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-, & .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.

  • Navigieren Sie in Ihrem HubSpot Account zu Bibliothek > Datei-Manager.
  • Klicken Sie auf Dateien hochladen
  • Wählen Sie auf der Festplatte Ihres Computers die Schriftarten-Dateien aus und klicken Sie dann auf Öffnen
  • Klicken Sie auf den Namen einer hochgeladenen Schriftart-Datei. 
  • 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

Sobald 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 die Arbeit mit Stylesheets inHubSpot. 

  • Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  • Öffnen Sie im Finder das für Ihre Inhalte verwendete Stylesheet.
  • 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 ihreschriftartdatei.xxx? mit der URL aus dem Dateien-Tool. Wiederholen Sie dies für jedes Dateiformat. 
  • Erstellen Sie CSS-Regeln mit der Eigenschaft font-family, um die benutzerdefinierte Schriftart anzuwenden. 
  • Klicken Sie oben rechts auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu veröffentlichen. 

sample-custom-font-in-stylesheet

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

Benutzerdefinierte Schriftarten werden in den beliebtesten E-Mail-Clients nicht unterstützt. Um eine einheitliche Darstellung für Ihre Leser zu gewährleisten, empfiehlt sich die Verwendung der Standard-Webschriftarten in E-Mails. 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.

  • Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  • Öffnen Sie im Finder die benutzerdefinierte E-Mail-Code-Vorlage.
  • Für jeden Stil der Schriftart:
    • Fügen Sie diesen Code in den <head>-Abschnitt der Vorlage zwischen den <style>....</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. 
  • Fügen Sie im Code des E-Mail-Textes die benutzerdefinierte Schriftart im Inline-Stylinghinzu. 
  • Klicken Sie oben rechts auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu veröffentlichen. 

Benutzerdefinierte Schriftart in einem CTA verwenden

Nach dem Hinzufügen einer benutzerdefinierten Schriftart zu Ihrem Design können Sie sie für CTAs verwenden:

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

 

Eine benutzerdefinierte Schriftart in einem CTA (alt) verwenden

Ähnlich wie bei CTAs können Sie nach dem Hochladen einer benutzerdefinierten Formulardatei diese mit älteren CTAs verwenden:

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

font-family: 'Your Font Name';

  • Ersetzen Sie Name Ihrer Schriftart mit dem Namen der Schriftart
  • Klicken Sie unten rechts auf Weiter. Klicken Sie dann auf Speichern

set-custom-font-for-cta

Benutzerdefinierte Schriftart in einem benutzerdefinierten Modul verwenden

Sobald Sie eine benutzerdefinierte Schriftart zum Dateien-Tool hinzugefügt haben, können Sie sie in benutzerdefinierten Modulen verwenden: Erfahren Sie, wie Sie eine Google-Schriftart zu einer benutzerdefinierten E-Mail-Code-Vorlage hinzufügen

  • Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
  • Öffnen Sie im Finder das benutzerdefinierte Modul.
  • Fügen Sie im Abschnitt module.css 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.
  • Erstellen Sie CSS-Regeln mit der Eigenschaft font-family, um die benutzerdefinierte Schriftart anzuwenden. 
  • Klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen zu veröffentlichen.

custom-module-custom-font

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.