Suche

Einen Google Font auf einer Landingpage verwenden

💡 Gut zu wissen
Landingpages stehen für Business- und Enterprise-Pläne zur Verfügung.

In diesem Artikel erklären wir Ihnen, wie Sie einen Google Font in eine Landingpage importieren und dort verwenden.

1️⃣ Abrufen des CSS-Importcodes

Um die Google Font URL abzurufen:

  1. Gehen Sie zu https://fonts.google.com/.
  2. Wählen Sie die Schriftartenfamilie aus, die Sie auf Ihrer Landingpage verwenden wollen.
    font-en_us.png
  3. Fügen Sie unter Stile die Stile ein, die Sie hinzufügen wollen, indem Sie auf "Name des Stils"+ klicken. Der Stil wird rechts im Review-Menüfeld angezeigt:select-font-en_us.png
  4. Wählen Sie unter dem Abschnitt Verwendung im Internet die Option @import aus. Sie erhalten daraufhin den CSS-Code für die Google Font URL sowie die CSS-Regeln, um Familien anzugeben.
    css_code_rules-en_us.png

2️⃣ Ihr benutzerdefiniertes CSS erstellen

💡 Gut zu wissen
Fügen Sie eine Fallback-Schriftart hinzu, falls der Browser oder das System Ihres Empfängers den importierten Google Font nicht unterstützt. 

Um Ihr benutzerdefiniertes CSS zu erstellen:

  1. Kopieren Sie den CSS-Code für die Google Font URL.
  2. Verwenden Sie die Klassen font-style-title, font-style-subtitle, font-style-head und font-style-normalText für die Titel-, Untertitel-, Kopf- und Normaltext-Schriftarten auf Ihrer Landingpage und geben Sie deren Familien an.
  3. Fügen Sie am Ende jeder Codezeile die !important-Regel ein, um sicherzustellen, dass alle vorherigen Styling-Regeln überschrieben werden und der richtige benutzerdefinierte Font auf der veröffentlichten Version der Landingpage angezeigt wird.

Im folgenden Beispiel haben wir den CSS-Code erstellt, um den Google Font "Source Sans Pro" von der Google Font Website (https://fonts.google.com/specimen/Source+Sans+Pro) zu importieren:

<style> @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');
.font-style-title {font-family:'Source Sans Pro', sans-serif !important; } .font-style-subtitle {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-heading {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-normalText {font-family: 'Source Sans Pro', sans-serif !important; } </style>

3️⃣ Benutzerdefinierte CSS zur Landingpage hinzufügen

  1. Klicken Sie im Landingpage-Editor in der Ecke unten links auf Einstellungen.
    settings-en_us.png

  2. Öffnen Sie die Registerkarte Tracking.

  3. Fügen Sie im Head Tag Ihr benutzerdefiniertes CSS hinzu.
    add_css-en_us.png

  4. Klicken Sie auf Fertig.
  5. Wenn Ihre Landingpage bereits veröffentlicht wurde, klicken Sie auf Starten und veröffentlichen Sie sie erneut, damit die Änderungen berücksichtigt werden.

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit dem richtigen zertifizierten Brevo-Expertenpartner zusammenbringen.

💬 War dieser Beitrag hilfreich?

8 von 27 fanden dies hilfreich