Doorgaan naar artikel
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 lettertypen op blogberichten of pagina's

Laatst bijgewerkt: juni 16, 2021

Geldt voor:

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

Als alternatief voor het gebruik van standaard web fonts of een font bibliotheek zoals Google fonts

, kun je font bestanden hosten in je file manager en ernaar verwijzen in je stylesheet.

Het toevoegen van een eigen lettertype zal het lettertype niet

toevoegen aan enige lettertype styling opties in HubSpot's editors. Je zult in plaats daarvan CSS moeten gebruiken om tekstelementen op je pagina's op te maken.

Om ervoor te zorgen dat de lettertypen in alle browsers worden geladen, heb je meerdere formaten van hetzelfde lettertype nodig. Het is aanbevolen om een minimum van de .woff, .ttf, & .eot versies van het lettertype op te nemen. Als je een lettertype gebruikt dat legaal op het web gebruikt mag worden, kun je Font Squirrel's converter tool gebruiken om de verschillende bestandsformaten te genereren. Je zult ook extra @font-face regels

moeten maken voor verschillende stijlen en gewichten (b.v. schuin, vet, licht, enz.).

Let op: aangepaste lettertypen kunnen niet worden gebruikt in:


Om aangepaste lettertypes aan je stylesheets toe te voegen, upload je je lettertypebestanden naar de bestandentool:

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Bestanden.
  • Klik opBestanden uploaden en selecteer de lettertypebestanden die u wilt uploaden.
  • Klik in het dashboard van bestandsbeheer op de naam van het lettertypebestand.
  • Klik in het rechterpaneel op URL kopiëren om de URL van het lettertype te krijgen om aan uw stylesheet toe te voegen. Voor de beste renderingsresultaten klikt u op het vervolgkeuzemenu Best ands-URL en selecteert u het domein waarop uwsite is gehost.

file-manager-get-url

Open vervolgens je stylesheet in de design manager:
@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
  • Vervang uw_font_file.xxx? door de URL uit het bestanden hulpprogramma. Herhaal dit voor elke opmaak.
  • Vervang 'Your Font Name' door denaam van uw aangepaste lettertype.

Nadat je de font-family en de font bron URL's in je code hebt vervangen, kun je naar de aangepaste font-family verwijzen in je stylesheet. Het volgende is een voorbeeld van hoe de uiteindelijke code er uit zou kunnen zien, waar het aangepaste lettertype wordt toegepast op de body van de pagina:

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