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

Google Fonts-Schriftarten zu Seiten und CTAs hinzufügen

Zuletzt aktualisiert am: Oktober 19, 2020

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Ehemaliges Marketing Hub Basic

Sie können Google Font-Link-Tags in Ihren Einstellungen oder im Feld „Header-HTML“ zu einer oder allen Seiten hinzufügen. Wenn Sie vertraut mit der Bearbeitung von CSS sind, können Sie den @import-Code oben in einer spezifischen CSS-Datei einfügen.

Bitte beachten: Wenn Sie Inhalte mithilfe eines Designs erstellen, können Sie alle Google Fonts-Schriftarten direkt in Ihren Designeinstellungen auswählen. Alle Google Fonts-Schriftarten werden auch in Starter-Vorlagen auf der Registerkarte „Design“ unterstützt.

Google Font-Skript kopieren

Kopieren Sie zuerst das Skript für Ihre gewünschte Schriftart von Google Fonts.

  • Gehen Sie zu fonts.google.com.
  • Suchen Sie in der Suchleiste nach dem Namen der gewünschten Schriftart.
  • Klicken Sie auf den Namen der Schriftart, um eine vollständige Liste der für den Import verfügbaren Stile anzuzeigen.
  • Klicken Sie neben jedem Stil, den Sie von dieser Schriftart importieren möchten, auf „+ Select this style“ (Diesen Stil auswählen).
  • Wählen Sie im rechten Bereich die Registerkarte „Embed“ (Einbetten) aus und wählen Sie dann @import aus.
  • Kopieren Sie das von Google angegebene@import-Skript ohne das <style>-Tag. Sie fügen dieses Skript oben in Ihrem Stylesheet in Ihrem HubSpot-Account hinzu.
  • Als Nächstes wenden Sie diese Schriftarten mithilfe von CSS rules to specify families (CSS-Regeln zum Angeben von Familien) von Google Fonts auf bestimmte CSS-Selektoren in Ihrem HubSpot-Stylesheet an.

import-google-fonts-to-stylesheet

Google-Schriftart zu HubSpot-Seiten hinzufügen

  • Fügen Sie die Google-Schrifart zu allen gewünschten CSS-Selektoren hinzu, wie in den folgenden Beispielen gezeigt. 

h1 {
font-family: 'Comic Neue', cursive;
}

Google Fonts-Schriftart zu einem CTA hinzufügen

Sie können eine Google Fonts-Schriftart zu einem benutzerdefinierten CTA in Ihrem Account hinzufügen. Diese Option ist nicht für einen Bild-CTA verfügbar.

  • Kopieren Sie in Google Fonts den unter Specify in CSS angegebenen Code.
  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > CTAs.
  • Bewegen Sie den Mauszeiger über den CTA, den Sie bearbeiten möchten. Klicken Sie dann auf das Dropdown-Menü „Aktionen“ und wählen Sie „Bearbeiten“ aus. 
  • Klicken Sie unten im CTA-Editor im rechten Bereich auf „Erweiterte Optionen“.
  • Fügen Sie im Textfeld „Benutzerdefinierte CSS“ den Code von CSS rules to specify families (CSS-Regeln zum Angeben von Familien) von Google Fonts ein. Sobald Sie diese CSS eingeben, wird die Google Fonts-Schriftart auf Ihren CTA angewendet. 

  • Klicken Sie unten rechts auf „Weiter“, um die Einzelheiten Ihres CTA festzulegen. Klicken Sie dann auf „Speichern“, um Ihre Änderungen zu übernehmen.