Gebruik aangepaste lettertypen op blogberichten of pagina's
Laatst bijgewerkt: februari 25, 2021
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 de 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 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
moeten maken voor verschillende stijlen en gewichten (b.v. schuin, vet, licht, enz.).Let op: aangepaste lettertypen kunnen niet worden gebruikt in:
- E-mailsjablonen, aangezien de meeste e-mailclients geen aangepaste lettertypen ondersteunen.
- Pagina's gebouwd met starter sjablonen.
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 *//* Jurassic Park Bold */
@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');
}
@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';
}
Gerelateerde documentatie
-
Sjabloonlay-outs structureren en aanpassen
Leer hoe u uw bestaande sjabloon met slepen en neerzetten kunt instellen en aanpassen, en hoe u kunt werken...
Kennisbank -
Gebruik globale inhoud voor meerdere sjablonen
Met globale inhoud kunt u een deel van de inhoud op meerdere pagina's van uw website herhalen. U kunt...
Kennisbank -
Gebruik standaard modules in uw sjabloon
Dit is een overzicht van alle standaardmodules die beschikbaar zijn voor sjablonen met slepen en neerzetten...
Kennisbank