Suche

Einen Google Font auf einer Landingpage verwenden

clickable_banner-pricing_3_en-us.png

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.coem/.
  2. Wählen Sie die Schriftfamilie aus, die Sie auf Ihrer Landingpage verwenden möchten.
    font-en_us.png
  3. Fügen Sie im Abschnitt Styles (Stile) die gewünschten Stile hinzu, indem Sie auf Select "Name of style" + ("Name des Stils" + auswählen) klicken. Der Stil wird im BereichSelected family (Ausgewählte Familie) auf der rechten Seite 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 die importierte Google-Schriftart 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-subtitlefont-style-head und font-style-normalText für die Schriftstile Titel, Untertitel, Kopf und Normaltext auf Ihrer Landingpage und geben Sie deren Familien an.
  3. Fügen Sie die wichtige Regel am Ende jeder Codezeile hinzu, um sicherzustellen, dass alle vorherigen Formatierungsregeln überschrieben werden und dass die benutzerdefinierte Schriftart, die in der veröffentlichten Version der Landingpage angezeigt wird, die richtige ist.

Im folgenden Beispiel haben wir den CSS Code zum Importieren der Google-Schriftart "Roboto" von der Schriftarten-Website von Google (https://fonts.google.com/specimen/Roboto) erstellt:

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap');
.font-style-titel {font-family:'Roboto', sans-serif !important; } .font-style-subtitle {font-family: 'Roboto', sans-serif !important; } .font-style-überschrift {font-family: 'Roboto', sans-serif !important; } .font-style-normalText {font-family: 'Roboto', sans-serif !important; } </style>

3️⃣ Benutzerdefinierte CSS zur Landingpage hinzufügen

  1. Gehen Sie zu Marketing > Landingpages.
  2. Wählen Sie die Landingpage aus, auf der Sie die Google-Schriftart verwenden möchten.

  3. Klicken Sie im Landingpage-Editor unten links auf Settings (Einstellungen) .
    settings-en_us.png

  4. Öffnen Sie die Registerkarte Tracking.

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

  6. Klicken Sie auf Fertig.
  7. 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 der richtigen zertifizierten Brevo-Partneragentur verbinden.

💬 War dieser Beitrag hilfreich?

8 von 31 fanden dies hilfreich