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.
CMS-General

Wie implementiere ich eine benutzerdefinierte Schriftart in HubSpot?

Zuletzt aktualisiert am: Januar 15, 2019

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
Basic
HubSpot CMS

Alternativ zur Verwendung von Standardwebschriftarten oder einer Schriftart-Bibliothek wie Google Fonts können Sie Schriftartdateien in Ihrem Dateimanager hosten und diese in Ihrer CSS-Datei referenzieren.

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 der Schriftart. 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 und nicht bei E-Mail-Vorlagen funktionieren, da die meisten E-Mail-Clients keine benutzerdefinierten Schriftarten unterstützen. 

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 alle Ihre Schriftartdateien erstellt haben, gehen Sie wie folgt vor:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Öffnen Sie das für Ihre Seite oder Blog-Vorlage verwendete Stylesheet.
  • 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 gehostete Schriftart verweisen:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Datei-Manager.
  • Klicken Sie auf „Dateien hochladen“ und wählen Sie die Schriftartdateien für den Upload aus.
  • Wählen Sie für optimale Anzeigeergebnisse über die Dropdown-Liste in der Datei-URL die Domain, auf der Ihr Inhalt gehostet wird, für die Datei-URL.
  • Klicken Sie in Ihrem Dateimanager-Dashboard auf die Datei und klicken Sie dann auf URL kopieren, um die URL der Schriftart zu Ihrem Stylesheet hinzuzufügen.

Dateimanager-Änderung-Domain


Nachdem Sie die Schriftartenfamilie und die Schriftart-Quell-URLs in Ihrem Code ersetzt haben, können Sie beginnen, die benutzerdefinierte Schriftartenfamilie 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';
}