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

Benutzerdefinierte Schriftarten in Blog-Beiträgen oder auf Seiten verwenden

Zuletzt aktualisiert am: Oktober 1, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

Als Alternative zu standardmäßigen Web-Schriftarten oder einer Schriftarten-Bibliothek wie Google Fonts können Sie Schriftarten-Dateien im Datei-Manager hosten und diese in Ihrem Stylesheet referenzieren.

Damit die Schriftarten in allen Browsern geladen werden, benötigen Sie jeweils mehrere Formate derselben Schriftart. Es wird empfohlen, mindestens die Versionen .woff, .ttf und .eot der Schriftart zu verwenden. 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. Zudem müssen Sie zusätzliche @font-face-Regeln für verschiedene Schriftarten und Schriftschnitte (z. B. schräg, fett, dünn usw.) erstellen. 

Hinweis: Diese Schritte funktionieren nur bei Vorlagen für Blog-Beiträge und Website-Seiten, jedoch nicht bei E-Mail-Vorlagen, da die meisten E-Mail-Clients keine benutzerdefinierten Schriftarten unterstützen

@font-face { font-family: 'Name Ihrer Schriftart';  src: url('Schriftartdatei.eot?') format('eot'), url('Schriftartdatei.woff') format('woff'), url('Schriftartdatei.ttf') format('truetype');}

Nun 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 beste Anzeigeergebnisse im Dropdown-Menü Datei-URL die Domain aus, in der Ihre Website gehostet wird.
  • Klicken Sie im Dashboard des Datei-Managers auf den Namen der Schriftartdatei.
  • Klicken Sie im rechten Bereich auf URL kopieren, um die URL der Schriftart abzurufen, die dem Stylesheet hinzugefügt werden soll.

file-manager-change-domain

Nachdem Sie die Schriftartenfamilie und die Schriftart-Quell-URLs im Code ersetzt haben, können Sie die benutzerdefinierte Schriftartenfamilie in Ihrem Stylesheet referenzieren. Im Folgenden sehen Sie ein Beispiel dafür, wie der Code am Ende aussehen könnte. Die benutzerdefinierte Schriftart wurde hier auf den Seitentext 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';
}