COS-General

Wie implementiere ich eine benutzerdefinierte Schriftart in HubSpot?

Zuletzt aktualisiert am: April 25, 2016

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 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. Bitte beachten Sie, dass diese Schritte nur bei Webseiten-Inhalten funktionieren, nicht bei E-Mail-Vorlagen. Wenn Sie eine Schriftart verwenden, die auch im Web rechtmäßig verwendet werden kann, können Sie die diversen Dateiformate mithilfe der Font Squirrel-Konvertierung generieren. Nachdem Sie die drei Schriftartdateien erstellt haben, gehen Sie wie folgt vor:

  • Navigieren Sie zu Inhalte > Datei-Manager.
  • Klicken Sie auf Dateien hochladen..., und wählen Sie die Schriftartdateien für den Upload aus.
  • Navigieren Sie zu Inhalte > Design-Manager.
  • Öffnen Sie das CSS, das auf Ihre Seite oder Blog-Vorlage angewendet wird.
  • Fügen Sie im oberen Bereich der CSS-Datei den folgenden @font-face-Code ein:
@font-face {
  font-family: 'Name Ihrer Schriftart';
  src: url('Ihre_Schriftartdatei.eot?') format('eot'), url('Ihre_Schriftartdatei.woff') format('woff'), url('Ihre_Schriftartdatei.ttf') format('truetype');
}
			

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

  • Nachdem Sie den betreffenden Code eingefügt haben, müssen Sie die font-family durch den Namen der Schriftart ersetzen.
  • Klicken Sie auf Aktionen > Datei 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 Schriftart-Quellen-URLs in Ihrem Code ersetzt haben, können Sie beginnen, die benutzerdefinierte font-family 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.

@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');
}
			
body{
font-family: 'Jurassic Park';
}