Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Design Manager

Gebruik aangepaste lettertypes op blogberichten of pagina's

Laatst bijgewerkt: november 9, 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.

Het toevoegen van een aangepast lettertype zal het lettertype niet toevoegen aan enige lettertype styling opties in de HubSpot's editors. In plaats daarvan moet u CSS gebruiken om tekstelementen op uw pagina's te stijlen.

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, heb je 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"; }