Zum Hauptinhalt
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.
Design Manager

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

Zuletzt aktualisiert am: März 18, 2021

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Ehemaliges Marketing Hub Basic

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. 

Durch das Hinzufügen einer benutzerdefinierten Schriftart wird die Schriftart nicht einer der Schriftart-Styling-Optionen in den Editoren von HubSpot hinzugefügt. Sie müssen stattdessen CSS verwenden, um Textelemente auf Ihren Seiten zu gestalten.

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. 

Bitte beachten: Benutzerdefinierte Schriftarten können in folgenden Inhaltselementen nicht verwendet werden:


Um benutzerdefinierte Schriftarten zu Ihren Stylesheets hinzuzufügen, laden Sie Ihre Schriftartdateien in das Dateien-Tool hoch: 

  • 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. Klicken Sie für optimale Anzeigeergebnisse auf das Dropdown-Menü „Datei-URL“ und wählen Sie die Domain aus, auf 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

Öffnen Sie als Nächstes Ihr Stylesheet im Design-Manager: 
@font-face { font-family: 'Name Ihrer Schriftart';  src: url('Schriftartdatei.eot?') format('eot'), url('Schriftartdatei.woff') format('woff'), url('Schriftartdatei.ttf') format('truetype');}
  • Ersetzen Sie Schriftartdatei.xxx? mit der URL aus dem Dateien-Tool. Wiederholen Sie dies für jedes Format. 
  • Ersetzen Sie 'Name Ihrer Schriftart'  mit dem Namen Ihrer benutzerdefinierten Schriftart. 

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';
}