Gebruik aangepaste lettertypen op blogberichten of pagina's

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

Het toevoegen van een eigen lettertype zal het lettertype niet

Om ervoor te zorgen dat de lettertypes 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

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. Voor de beste renderingsresultatenklikt u op het vervolgkeuzemenu Bestands-URL en selecteert u het domein waarop uw site wordt gehost.
• Klik in het dashboard Bestandsbeheer op de naam van het lettertypebestand.
• Klik in het rechterpaneel op URL kopiëren om de URL van het lettertype op te halen en aan je stylesheet toe te voegen.

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open hetstylesheet dat is toegepast op je blog of paginasjabloon.
• Bovenaan je stylesheet plak je de volgende @font-face code. Neem meerdere regels op als je bestanden importeert voor meerdere lettertypefamilie stijlen.

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


}