Design Manager

Gebruik aangepaste lettertypes op blogberichten of pagina's

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Als alternatief voor het gebruik van standaard webfonts of het gebruik van een fontbibliotheek zoals Google fonts, kunt u fontbestanden hosten in uw bestandsmanager en ernaar verwijzen in uw stylesheet.

Let op: aangepaste lettertypes kunnen niet worden gebruikt op pagina's die zijn gebouwd met startersjablonen.

Om de lettertypen in alle browsers te kunnen laden, hebt u meerdere formaten van hetzelfde lettertype nodig. Het wordt aanbevolen om een minimum van de .woff, .ttf, & .eot versies van het lettertype op te nemen. Als u een lettertype gebruikt dat legaal op het web kan worden gebruikt, kunt u de converter tool van Font Squirrel gebruiken om de verschillende bestandsformaten te genereren. U zult ook extra @font-face regels moeten maken voor verschillende stijlen en gewichten (bijv. schuin, vet, licht, enz.).

Let op: deze stappen werken alleen voor blogpost- en webpaginasjablonen, en niet voor e-mailsjablonen, omdat de meeste e-mailclientsgeen aangepaste lettertypen ondersteunen.

@font-face { font-familie: 'Your Font Name'; src: url('your_font_file.eot?') formaat('eot'), url('your_font_file.woff') formaat('woff'), url('your_font_file.ttf') formaat('truetype').

Vervang vervolgens de lettertype-URL's in het codeblok van het lettertype om te verwijzen naar uw gehoste lettertype:

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Bestanden.
  • Klik opBestanden uploaden en selecteer de lettertypebestanden die u wilt uploaden. Voor de beste resultaten klikt u op het vervolgkeuzemenu Bestands-URL en selecteert u het domein waarop uw sitewordt gehost.
  • Klik in het dashboard van Bestandsbeheer op de naam van het lettertypebestand.
  • Klik in het rechtervenster opURL kopiërenom de URL van het lettertype aan uw stylesheet toe te voegen.

file-manager-change-domain

Na het vervangen van de lettertype-familie en de bron-URL's van het lettertype in uw code, kunt u verwijzen naar de aangepaste lettertype-familie in uw stylesheet. Het volgende is een voorbeeld van hoe de uiteindelijke code eruit zou kunnen zien, waarbij het aangepaste lettertype wordt toegepast op de body van de pagina.

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



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



lichaam {
font-familie: "Jurassic Park"; }