CMS-General

Wie lassen sich nicht standardmäßige Schriftarten in HubSpot implementieren?

Zuletzt aktualisiert am: November 6, 2017

Produkte/Lizenzen

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

Als Alternative zur Verwendung von standardmäßigen Web-Schriftarten oder einer Schriftarten-Bibliothek wie Google-Fonts können Sie Schriftarten-Dateien im Datei-Manager hosten und diese in Ihren CSS-Definitionen verwenden.

Damit die Schriftarten in allen Browsern geladen werden, benötigen Sie jeweils mehrere Formate derselben Schriftart. Für möglichst zuverlässige Ergebnisse benötigen Sie mindestens die .woff-, .ttf- und .eot-Version. Zudem müssen Sie zusätzliche @font-face-Regeln für verschiedene Schriftarten und Schriftschnitte (z. B. schräg, fett, dünn usw.) erstellen.

Bitte beachten Sie, dass diese Schritte nur bei Webseiten-Inhalten funktionieren und nicht bei E-Mail-Vorlagen, da die meisten E-Mail-Clients keine nicht standardmäßigen Schriftarten unterstützen. Weitere Informationen dazu finden Sie hier.

Wenn Sie eine Schriftart verwenden, die auch im Web rechtmäßig verwendet werden kann, können Sie die diversen Dateiformate mithilfe des Font Squirrel-Konvertierungstools generieren. Nachdem Sie die drei Schriftartdateien erstellt haben, gehen Sie wie folgt vor:

  • Gehen Sie in Ihrem HubSpot Marketing-Daschboard zu „Content“ > „Datei-Manager“.
  • Klicken Sie auf „Dateien hochladen“, und wählen Sie die Schriftartdateien für den Upload aus.
  • Gehen Sie zu „Content“ > „Design-Manager“.
  • Öffnen Sie das CSS-Stylesheet, das auf Ihre Seiten- oder Blog-Vorlage angewendet wird.
  • Fügen Sie im oberen Bereich der CSS-Datei den folgenden @font-face-Code ein. Wenn Sie Dateien für mehrere Schriftfamilien importieren, müssen Sie mehrere Regeln einbeziehen.
@font-face { font-family: 'Name Ihrer Schriftart'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

Als Nächstes müssen Sie die Schriftart-URLs im font-face-Codeblock ersetzen, damit sie auf Ihre gehosteten Schriftartendateien verweisen.

  • Nachdem Sie den betreffenden Code eingefügt haben, müssen Sie den Namen Ihrer Schriftart als „font-family“ angeben.
  • Klicken Sie auf „Aktionen“ > „Datei-URL einfügen“.
  • Suchen Sie die Schriftartdatei.
  • Wählen Sie für optimale Anzeigeergebnisse die Domain, auf der Ihr Inhalt gehostet wird.
  • Klicken Sie auf „Datei verwenden“.
Vom Benutzer hinzugefügte Abbildung
Vom Benutzer hinzugefügte Abbildung

Nachdem Sie die „font-family“ und die URLs für Ihre Schriftartendateien in Ihrem Code ersetzt haben, können Sie beginnen, die Defenition in Ihrem CSS zu referenzieren. Unten sehen Sie ein Beispiel dafür, wie der Code am Ende aussehen könnte. Die benutzerdefinierte Schriftart wurde hier auf das Hauptteil-Element der Seite angewendet.

/* Jurassic Park Normal */
@font-face {
font-family: 'Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

/* Jurassic Park Bold */
@font-face {
font-family: 'Jurassic Park'; src: url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.ttf') format('truetype');
font-weight: 700;
}

body {
font-family: 'Jurassic Park';
}