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.
Landing Pages

Benutzerdefinierte Schriftarten in HubSpot

Zuletzt aktualisiert am: Oktober 15, 2021

Produkte/Lizenzen

Alle

Die für Content in HubSpot verfügbaren Schriftarten hängen vom Content und der Schriftart ab. Bestimmte Standardschriftarten sind in allen Content-Editors verfügbar, während für Google Fonts und benutzerdefinierte Schriftarten zusätzliche Einschränkungen gelten (siehe unten): 

Content-Typ Schriftart  
  Standardschriftarten Google Fonts

Benutzerdefinierte Schriftarten

 
Seite – Starter-Vorlagen Verfügbar auf der Registerkarte„Design“ des Content-Editors Nicht verfügbar  
Seite – Designvorlagen Verfügbar in den Design-Einstellungen und über das Stylesheet Verfügbar über Stylesheet  
Seite – kodierte Vorlage Verfügbar über Stylesheet oder benutzerdefiniertes Modul Verfügbar über Stylesheet  
Blog Verfügbar über Stylesheet oder benutzerdefiniertes Modul Verfügbar über Stylesheet  
E-Mail Einige Standardschriftarten sind im Drag-and-Drop-E-Mail-Editor nicht verfügbar Verfügbar nur für benutzerdefinierte kodierte E-Mail-Vorlagen; wird von den meisten E-Mail-Clients nicht unterstützt Verfügbar nur für benutzerdefinierte kodierte E-Mail-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  

Standardschriftarten verwenden

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

  • Gehen Sie zu Ihrem Content:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
    • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
    • Blog: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Blog.
    • Wissensdatenbank: Gehen Sie in Ihrem HubSpot-Account zu Service > Wissensdatenbank.
    • E-Mail: Gehen Sie in Ihrem HubSpot-Account zu Marketing > E-Mail.
  • Bewegen Sie den Mauszeiger über Ihren Content und klicken Sie auf „Bearbeiten“
  • 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-and-Drop-E-Mail-Editor nicht verfügbar.  

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

Google Fonts verwenden

Google Fonts sind im Content-Editor für Seiten verfügbar, die Starter-Vorlagen und Designs verwenden, sowie für Wissensdatenbank-Artikel und benutzerdefinierte Module. Um eine Google-Schriftart auf anderen Seiten zu verwenden, müssen Sie den Importcode der Schriftart kopieren, ihn in das Stylesheet der Seite einfügen und die Schriftart dann mit CSS-Regeln anwenden.

Weitere Informationen, wie Entwickler Google Fonts mithilfe von Schriftart-Feldern zu Designs und benutzerdefinierten Modulen hinzufügen, finden Sie in der Dokumentation für Entwickler von HubSpot. 

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

  • 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 der Google Fonts haben, können Sie die Schriftart zu Ihrem HubSpot-Content hinzufügen: 

Google-Schriftart in einem Stylesheet verwenden

  • Kopieren Sie den @import-Code der Schriftart aus Google Fonts.
  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Öffnen Sie im Finder das für Ihren Content verwendete Stylesheet.
  • Fügen Sie den @import-Code in Zeile 1 des Stylesheets ein.
  • Fügen Sie den Code zum Festlegen von CSS-Regeln zu den entsprechenden Selektoren im Stylesheet hinzu. 
add-google-fonts-imported-font-to-stylesheet
  • Klicken Sie oben rechts auf „Veröffentlichen“ oder „Aktualisieren“, um Ihre Änderungen zu veröffentlichen. 

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 die Auswahl der Standardschriftarten, die im aktualisierten klassischen E-Mail-Editor verwendet werden.
 
So fügen Sie eine Google-Schriftart zu einer benutzerdefinierten E-Mail-Vorlage hinzu: 
  • Kopieren Sie den @import-Code der Schriftart aus Google Fonts.
  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Öffnen Sie im Finder die benutzerdefinierte kodierte E-Mail-Vorlage.
  • Fügen Sie im Abschnitt <head> der Vorlage den @import-Code zwischen den <style>....</style>-Tags ein.
  • Fügen Sie im Code des E-Mail-Textes die benutzerdefinierte Schriftart im Inline-Styling hinzu. 
  • Klicken Sie oben rechts auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu veröffentlichen. 

Google-Schriftart in einem CTA verwenden

  • Kopieren Sie den Code von Google für das Festlegen der CSS-Regeln für diese Schriftart.
  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > CTAs.
  • Bewegen Sie Ihren Mauszeiger auf einen CTA, klicken Sie dann auf das Dropdown-Menü „Aktionen“ und wählen Sie „Bearbeiten“ aus.
  • 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 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 Marketing > Dateien und Vorlagen > Design-Manager.

click-add-field

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

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
    • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
    • Blog: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Blog.
  • Bewegen Sie den Mauszeiger über den Inhalt des benutzerdefinierten Moduls und klicken Sie auf „Bearbeiten“
  • 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 zu standardmäßigen Web-Schriftarten oder einer Schriftarten-Bibliothek wie Google Fonts können Sie Schriftarten-Dateien im Dateien-Tool hosten und diese dann in Ihrem Stylesheet referenzieren. 

Bitte beachten: Benutzerdefinierte Schriftarten müssen über CSS angewendet werden. Durch das Hinzufügen einer benutzerdefinierten Schriftart wird die Schriftart nicht den Dropdown-Menüs „Styling“ im Content-Editor hinzugefügt.

Um eine Schriftart in Content zu verwenden, laden Sie die Dateien der Schriftart in das Dateien-Tool hoch. HubSpot empfiehlt, mindestens die WOFF-, TTF- und EOT-Versionen der Schriftart hochzuladen, um sicherzustellen, dass Ihre Schriftart in allen Browsern geladen wird.

s. Sie können den Expertenmodus des Font Squirrel Konverter-Tools verwenden, um weitere Dateiformate zu generieren.

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > 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 Arbeiten mit Stylesheets in HubSpot

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Öffnen Sie im Finder das für Ihren Content verwendete Stylesheet.
  • Für jeden Stil der Schriftart:
    • Fügen Sie oben im Stylesheet den folgenden Code ein:  
@font-face { font-family: 'Name Ihrer Schriftart';  src: url('Schriftartdatei.eot?') format('eot'), url('Schriftartdatei.woff') format('woff'), url('Schriftartdatei.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.
  • 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-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 kodierten E-Mail-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 Marketing > Dateien und Vorlagen > Design-Manager.
  • Öffnen Sie im Finder die benutzerdefinierte kodierte E-Mail-Vorlage.
  • Für jeden Stil der Schriftart:
    • Fügen Sie diesen Code in den Abschnitt <head> der Vorlage zwischen den Tags <style>....</style> ein:
@font-face { font-family: 'Name Ihrer Schriftart';  src: url('Schriftartdatei.eot?') format('eot'), url('Schriftartdatei.woff') format('woff'), url('Schriftartdatei.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.
  • Fügen Sie im Code des E-Mail-Textes die benutzerdefinierte Schriftart im Inline-Styling hinzu. 
  • Klicken Sie oben rechts auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu veröffentlichen. 

Benutzerdefinierte Schriftart in einem CTA verwenden

Sobald Sie eine benutzerdefinierte Schriftart zum Dateien-Tool hinzugefügt haben, können Sie sie in CTAs verwenden: 

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > CTAs.
  • Bewegen Sie Ihren Mauszeiger auf einen CTA, klicken Sie dann auf das Dropdown-Menü „Aktionen“ und wählen Sie „Bearbeiten“ aus.
  • Klicken Sie in der rechten Ansicht auf „Erweiterte Optionen“.
  • Fügen Sie diesen Code in das Textfeld ein: 

font-family: 'Name Ihrer Schriftart';

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

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Öffnen Sie im Finder das benutzerdefinierte Modul.
  • Fügen Sie im Abschnitt „module.css“ den folgenden Code ein: 
@font-face { font-family: 'Name Ihrer Schriftart';  src: url('Schriftartdatei.eot?') format('eot'), url('Schriftartdatei.woff') format('woff'), url('Schriftartdatei.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.
  • Erstellen Sie CSS-Regeln mit der Eigenschaft font-family, um die benutzerdefinierte Schriftart anzuwenden. 

custom-module-custom-font

  • Klicken Sie oben rechts auf „Änderungen veröffentlichen“, um Ihre Änderungen zu veröffentlichen.