Verwenden Sie benutzerdefinierte Schriftarten auf Ihrer Landing Page

Erfahren Sie, wie Sie benutzerdefinierte Schriftarten auf Ihren ActiveCampaign-Landing Pages verwenden können. 

Seiten ist auf den folgenden Plänen verfügbar:

  • Plus
  • Professionell
  • Unternehmen

Mit ActiveCampaign können Sie benutzerdefinierte Schriftarten in Ihrem Konto verwenden, so dass Sie diese auf Ihren Landing Pages einsetzen können. Auf diese Weise schaffen Sie ein nahtloses Markenerlebnis für Ihre Seitenbesucher und Kunden.

Zur Kenntnis nehmen

  • Das Hochladen von benutzerdefinierten Schriftarten in Ihr ActiveCampaign-Konto erfordert gute Kenntnisse von CSS
  • Benutzerdefinierte Schriftarten können nur auf Ihren Landing Pages verwendet werden
  • Im Moment wird die benutzerdefinierte Schriftart im Pages Builder nich tangezeigt . Um die benutzerdefinierte Schriftart in Aktion zu sehen, müssen Sie die Seite veröffentlichen und den Live-Link anzeigen

Hochladen von benutzerdefinierten Schriftarten in Ihr ActiveCampaign-Konto

Um benutzerdefinierte Schriftarten auf Ihrer Landing Page zu verwenden, müssen Sie zunächst Ihre Schriftdatei in den Dateimanager von Pages hochladen. Sie müssen dann CSS zu den Einstellungen für jede Seite hinzufügen, die benutzerdefinierte Schriftarten verwenden soll.

1. Erstellen Sie eine Datei mit den benutzerdefinierten Schriftarten, die Sie in Ihr ActiveCampaign-Konto hochladen möchten. Diese Dateien haben normalerweise das Dateiformat .otf oder .tff. 

2. Laden Sie Ihre Schriften auf der Transfonter-Websitehoch und konvertieren Sie sie.

  • Zur Transfonter-Websitegehen
  • Stellen Sie bei den Kontrollkästchen auf der rechten Seite sicher, dass nur WOFF und WOFF2 ausgewählt sind
  • Klicken Sie obenauf die Schaltfläche "Schriftarten hinzufügen" und wählen Sie dann Ihre Schriftartendatei aus
  • Klicken Sie auf die Schaltfläche "Konvertieren", um die Schriftarten zu konvertieren

3. Laden Sie beide Schriftkacheln in den Pages-Dateimanager hoch.

  • Klicken Sie im linken Menüauf "Site" und dann auf "Seiten".
  • Klicken Sie auf die Registerkarte "Dateien".
  • Klicken Sie auf die Schaltfläche "Hochladen".

4. Kopieren Sie den Pfad für jede Schriftartdatei.  

  • Klicken Sie im Pages-Dateimanager mit der rechten Maustaste auf die WOFF-Schriftdatei und klicken Sie auf "Link holen".
  • Kopieren Sie die angezeigte URL und halten Sie sie bereit
  • Wiederholen Sie diesen Vorgang für die WOFF2-Schriftdatei

5. Suchen Sie die Seite, für die Sie benutzerdefinierte Schriftarten verwenden möchten, und rufen Sie deren Einstellungen auf.

  • Klicken Sie im Dateimanager auf die Registerkarte "Seiten".
  • Fahren Sie mit der Maus über die Landing Page, mit der Sie arbeiten möchten
  • Klicken Sie auf "Seiteneinstellungen anzeigen".

6. Kopieren Sie anschließend den folgenden CSS-Code

<style>
    @font-face {
      Schriftfamilie Schriftartname';
  src: url('') format('woff2'),
    url('') format('woff');
      font-weight: normal;
      Schriftart: normal;
    }
   
    h1,h2,p {
        Schriftfamilie 'Font name', sans-serif !important;
    }
</style>

7. Fügen Sie den Code in den Abschnitt <head> des Bereichs "Benutzerdefinierter Code" in den Einstellungen Ihrer Seite ein.

Standardmäßig

8. "Font-Familie" kann ein beliebiger Name sein, den Sie verwenden möchten. Vergewissern Sie sich, dass das, was in der ersten "font-family" eingestellt ist, genau dem Namen entspricht, der in der letzten "font-family" eingestellt ist.

9. Kopieren Sie die Dateipfad-URLs (Schritt 4 oben)und fügen Sie sie in die entsprechenden Slots innerhalb des @font-face-CSS ein. 

10. Der zweite CSS-Block teilt Ihrer Seite mit, welche Überschrift und Text-Tags die benutzerdefinierte Schriftart verwenden sollen. Sie können h1, h2, h3, h4, h5, h6 und p verwenden.

Die benutzerdefinierte Schriftart überschreibt den gesamten Text auf der Landing Page, der die Überschrift oder das Text-Tag bildet. Wenn ich zum Beispiel die benutzerdefinierte Schriftart auf "p" einstelle, wird der gesamte Text auf der Seite, der als "Absatz" markiert ist, durch meine benutzerdefinierte Schriftart ersetzt.

11. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "Speichern"

War dieser Beitrag hilfreich?
1 von 4 fanden dies hilfreich

Have more questions? Submit a request

Start free trial