Benutzerdefinierte Schriftarten in HubSpot

Die für Content in HubSpot verfügbaren Schriftarten hängen vom Content und der Schriftart 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: 

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

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 zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Website-Seiten.
  • Landingpages: Klicken Sie in Ihrem HubSpot-Account auf Marketing und dann auf Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Blog.
  • Wissensdatenbank: Klicken Sie in Ihrem HubSpot-Account auf Service und dann auf Wissensdatenbank.
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
• Bewegen Sie den Mauszeiger über Ihren Content und klicken Sie auf „Bearbeiten“. 
• Klicken Sie im Inhaltseditor auf einen Rich-Text-Baustein 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 eine Schriftartaus. 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 Schriftfeld auch verwenden, um Webschriften zu Themen und benutzerdefinierten Modulen hinzuzufügen. Bei dieser Art der Verwendung werden die Webschriften nicht von einem Drittanbieter-Service geladen, sondern von HubSpot direkt auf der Domain des Inhalts.

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

Sie können auch Dienste von Drittanbietern wie Google Fonts nutzen, indem Sie den Importcode der Schriftart kopieren, in das Stylesheet des Inhalts 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. 

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

• Google-Schriftart in einem Stylesheet verwenden
• Google-Schriftart in einer benutzerdefinierten E-Mail-Vorlage verwenden
• Verwendung einer Google-Schriftart in einem CTA (Legacy)
• Google-Schriftart in einem Formular verwenden
• Google-Schriftart in einem benutzerdefinierten Modul verwenden

Google-Schriftart in einem Stylesheet verwenden

• Kopieren Sie den @import-Code der Schriftart aus Google Fonts.
• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
• Öffnen Sie im Finder das für Ihren Inhalt 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.
• Klicken Sie oben rechts auf Veröffentlichen Änderungen, um Ihre Änderungen live zu schalten. 

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

• Kopieren Sie den @import-Code der Schriftart aus Google Fonts.
• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
• Öffnen Sie im Finder die benutzerdefinierte kodierte E-Mail-Vorlage.
• Im Abschnitt<head> abschnitt der Vorlage fügen Sie den @import-Code zwischen den <style>....</style> tags ein. 
• Fügen Sie im Code des E-Mail-Textes die benutzerdefinierte Schriftart im Inline-Stylinghinzu. 
• Klicken Sie oben rechts auf „Änderungen veröffentlichen“, um Ihre Änderungen zu veröffentlichen. 

Verwendung einer Google-Schriftart in einem CTA (Legacy)

• Kopieren Sie den Code von Google für die Einstellung der CSS-Regeln für diese Schriftart.
• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung > Button-CTAs.
• Bewegen Sie den Mauszeiger über einen CTA und klicken Sie dann auf Aktionen > Bearbeiten. 
• Klicken Sie im rechten Bereich auf Erweiterte Optionen. 
• Fügen Sie in das Textfeld den Code von Google für die Einstellung 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

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung und 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 Formulareditor 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ü Schriftfamilie und wählen Sie eine Google-Schriftartaus. 
• Klicken Sie oben rechts auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu übernehmen. 

Google-Schriftart in einem benutzerdefinierten Modul verwenden

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

• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.

• Öffnen Sie im Finder auf der linken Seite das benutzerdefinierte Modul. Erfahren Sie mehr über die Erstellung eines benutzerdefinierten Moduls.
• Klicken Sie im inspector auf der rechten Seite auf das Dropdown-Menü Feld hinzufügen im Bereich Felder und wählen Sie Schriftart. Erfahren Sie mehr über und die Arbeit mit Schriftfeldern. 

• 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 zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Website-Seiten.
  • Landingpages: Klicken Sie in Ihrem HubSpot-Account auf Marketing und dann auf Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Blog.
• Bewegen Sie den Mauszeiger über den Content 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

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 Sie: benutzerdefinierte Schriftarten sind nur in Accounts mit Zugriff auf den Design-Manager verfügbar und müssen mit CSS angewendet werden. Wenn Sie eine benutzerdefinierte Schriftart hinzufügen, wird nicht die Schriftart zu den Styling-Dropdown-Menüs im Inhaltseditor hinzugefügt. 

Um eine Schriftart in Content zu verwenden, laden Sie die Dateien der Schriftart in das Dateien-Tool hoch. HubSpot empfiehlt, mindestens die Versionen .woff, .ttf, &.eot der Schriftart hochzuladen, um sicherzustellen, dass Ihre Schriftart in allen Browsern funktioniert. Sie können den Expertenmodus des Font Squirrel Konverter-Tools verwenden, um weitere Dateiformate zu erzeugen.

• Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf 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 zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
• Öffnen Sie im Finder das für Ihren Inhalt verwendete Stylesheet.
• Für jeden Schriftstil: 
  • 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 Ihre_Schriftartdatei.xxx? durch die URL aus dem Dateiwerkzeug. 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. 

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, wird empfohlen, in E-Mails die Standard-Webschriftarten zu verwenden. 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 zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
• Öffnen Sie im Finder die benutzerdefinierte kodierte E-Mail-Vorlage.
• Für jeden Schriftstil:
  • Fügen Sie im Abschnitt <head> der Vorlage diesen Code zwischen die <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 Ihre_Schriftartdatei.xxx? durch die URL aus dem Dateiwerkzeug. 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. 

Verwendung einer benutzerdefinierten Schriftart in einem CTA (Legacy)

Sobald Sie eine benutzerdefinierte Schriftart zum Dateiwerkzeug hinzugefügt haben, können Sie sie in älteren CTAs verwenden: 

• Klicken Sie in Ihrem HubSpot-Account auf Marketing > Lead-Erfassung > Button-CTAs.
• Bewegen Sie den Mauszeiger über einen CTA und klicken Sie dann auf Aktionen > Bearbeiten. 
• Klicken Sie im rechten Bereich 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“. 

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 zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf 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 Ihre_Schriftartdatei.xxx? durch die URL aus dem Dateiwerkzeug. 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 live zu schalten.