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.

Lettertypen gebruiken in HubSpot

Laatst bijgewerkt: maart 15, 2024

Beschikbaar met elk van de volgende abonnementen, behalve waar vermeld:

Alle producten en plannen

De lettertypen die beschikbaar zijn voor inhoud in HubSpot zijn afhankelijk van het type inhoud en het type lettertype. Bepaalde standaardlettertypen zijn beschikbaar in alle inhoudseditors, terwijl weblettertypen (zoals Google Fonts) en aangepaste lettertypen extra beperkingen hebben, zoals hieronder beschreven:

Type inhoud Lettertype
Standaardlettertypen Weblettertypen

Aangepaste lettertypen

Pagina - startsjablonen Beschikbaar op het tabbladStijlen van de inhoudseditor Niet beschikbaar
Pagina - themasjablonen Beschikbaar in thema-instellingen en via stylesheet
Pagina - gecodeerd sjabloon Beschikbaar via stylesheet of aangepaste module Beschikbaar via stylesheet
Blog Beschikbaar via stylesheet of aangepaste module
E-mail Sommige standaardlettertypen niet beschikbaar in de sleep-en neerzet-e-maileditor Alleen beschikbaar voor aangepaste e-mailsjablonen; wordt niet ondersteund in de meeste e-mailclients Alleen beschikbaar voor aangepaste e-mailsjablonen; wordt niet ondersteund in de meeste e-mailclients
Kennisbank Beschikbaar op het tabblad Ontwerp van de sjablooneditor Niet beschikbaar
Aangepaste module Beschikbaar voor aangepaste modules die niet in e-mails worden gebruikt Beschikbaar voor aangepaste modules die niet in e-mails worden gebruikt
CTA (legacy)

Let op: niet alle contenttypen zijn beschikbaar in alle accounts. De contenttypen die beschikbaar zijn voor de abonnementen in je HubSpot-account kun je vinden in de Product- en Dienstencatalogus.

Standaardlettertypen gebruiken

Standaardlettertypes kunnen worden gebruikt in alle soorten inhoud en zijn ontworpen om te worden geladen op de meeste platforms en apparaten.

  • Navigeer naar je inhoud:

    • Website Pagina's: Ga in je HubSpot account naar Marketing > Website > Website pagina's.
    • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.
    • Blog: Ga in je HubSpot account naar Marketing > Website > Blog.
    • Kennisbank: Ga in je HubSpot account naar Service > Kennisbank.
    • E-mail: Ga in je HubSpot account naar Marketing > E-mail.
  • Beweeg de muis over je inhoud en klik op Bewerken.
  • Klik in de inhoudseditor op een rijke tekstmodule en markeer de tekst die je wilt bewerken.
  • Klik in de werkbalk Rijke tekst op het vervolgkeuzemenu Lettertype en selecteer een lettertype. De volgende lettertypes zijn beschikbaar in rich text modules:
    • Andale Mono*

    • Arial

    • Boek antiqua*

    • Courier Nieuw

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbool*

    • Tahoma

    • Terminal*

    • Times Nieuw Romein

    • Trebuchet MS

    • Verdana

*Niet beschikbaar in de sleep-en neerzet-e-maileditor.

**Alleen beschikbaar als webfont in de e-maileditor voor slepen en neerzetten.

Gebruik weblettertypen

Webfonts zijn standaard beschikbaar in de inhoudseditor voor pagina's die gebruikmaken van startsjablonen en thema's, maar ook voor kennisbankartikelen en aangepaste modules.

Als je een ontwikkelaar bent, kun je het lettertypeveld ook gebruiken om weblettertypen toe te voegen aan thema's en aangepaste modules. Als je ze op deze manier gebruikt, worden webfonts niet geladen van een service van derden; HubSpot laadt ze in plaats daarvan rechtstreeks op het domein van de inhoud.

Let op: weblettertypen kunnen niet worden geselecteerd in het vervolgkeuzemenu met lettertypen van de rich text editor.

Je kunt ook services van derden gebruiken, zoals Google Fonts, door de importcode van het lettertype te kopiëren, deze in het stylesheet van de inhoud te plakken en het lettertype vervolgens toe te passen via CSS:

  • Navigeer naar fonts.google.com.
  • Voer in de zoekbalk een lettertypenaam in.
  • Klik op de naam van het lettertype om een lijst weer te geven met beschikbare stijlen om te importeren.
  • Klik naast elke stijl die je wilt importeren op + Selecteer deze stijl
  • Selecteer @import in het rechterpaneel in de sectie Gebruik op het web .
  • Kopieer de code van het lettertype:
    • Kopieer in de sectie Gebruik op het web de @import-code zonder de code <style>.
    • Kopieer in het veld CSS-regels om families te specificeren de code voor het instellen van CSS-regels.

copy-google-font

Zodra je de code van Google Fonts hebt, kun je het lettertype toevoegen aan je HubSpot-inhoud:

Een Google-lettertype gebruiken in een stylesheet

  • Kopieer de @import code van het lettertype van Google Fonts.
  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Ontwerptools.
  • Open in de zoeker het stylesheet dat voor je inhoud is gebruikt.
  • Plak de @import-code in regel 1 van het stylesheet.
  • Voeg de code voor het instellen van CSS-regels toe aan de juiste selectors in het stylesheet.
  • Klik rechtsboven op Wijzigingen publiceren om je wijzigingen live te zetten.
add-google-fonts-imported-font-to-stylesheet

Een Google Font gebruiken in een aangepaste e-mailsjabloon

Hoewel Google Fonts worden ondersteund door Apple Mail en een paar andere e-mailclients, is de ondersteuning beperkt en ondersteunen de meeste populaire e-mailclients alleen standaard weblettertypen. Meer informatie over het selecteren van de standaardlettertypen die worden gebruikt in de klassieke e-maileditor.
Op maat gemaakte e-mailsjablonen zijn alleen beschikbaar in accounts met een Marketing Hub Professional of Enterprise abonnement.
Een Google Font toevoegen aan een aangepaste e-mailsjabloon:
  • Kopieer de @import code van het lettertype van Google Fonts.
  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Ontwerptools.
  • Open de aangepaste e-mailsjabloon in de zoeker.
  • Plak in de sectie<head> van de sjabloon de @import-code tussen de <style>....</style> tags.
  • Voeg in de code van de e-mailtekst het aangepaste lettertype toe in inline styling.
  • Klik rechtsboven op Wijzigingen publiceren om je wijzigingen live te zetten.

Gebruik een Google-lettertype in een CTA (legacy)

  • Kopieer de code van Google voor het instellen van CSS-regels voor dat lettertype.
  • Ga in je HubSpot account naar Marketing > Lead registratie > CTA knoppen.
  • Ga met de muis over een CTA en klik op Acties > Bewerken.
  • Klik in het rechterpaneel op Geavanceerde opties.
  • Plak in het tekstvak de code van Google voor het instellen van CSS-regels voor dat lettertype.
  • Klik rechtsonder op Volgende. Klik vervolgens op Opslaan.

Een Google-lettertype in een formulier gebruiken

  • Ga in je HubSpot account naar Marketing > Leadregistratie > Formulieren.
  • Ga met de muis over de formuliernaam en klik op Acties > Formulier bewerken of Een nieuw formulier maken.
  • Klik in de formuliereditor op het tabblad Stijl & voorbeeld.
  • Klik in het menu aan de linkerkant op de sectie Stijl .
  • Klik in het gedeelte Tekst op het vervolgkeuzemenu Font family en selecteer een Google Font.
  • Klik rechtsboven op Bijwerken of Publiceren om je wijzigingen live te zetten.

Een Google Font gebruiken in een aangepaste module

Let op: Google Fonts zijn niet beschikbaar voor aangepaste modules die worden gebruikt in e-mailsjablonen.


  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Ontwerptools.

click-add-field

  • Klik rechtsboven op Wijzigingen publiceren om je wijzigingen live te zetten.
  • Navigeer naar je inhoud:

    • Website Pagina's: Ga in je HubSpot account naar Marketing > Website > Website pagina's.
    • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.
    • Blog: Ga in je HubSpot account naar Marketing > Website > Blog.
  • Ga met de muis over de inhoud met de aangepaste module en klik op Bewerken.
  • Klik in de inhoudseditor op de aangepaste module.
  • Klik in de editor van de zijbalk op het vervolgkeuzemenu Font field en selecteer een Google Font.

Gebruik aangepaste lettertypen

Als alternatief voor het gebruik van standaard webfonts of een fontbibliotheek zoals Google Fonts, kun je fontbestanden uploaden en ze vervolgens gebruiken in thema's of ernaar verwijzen in stylesheets.

Gebruik aangepaste lettertypen in thema's

In de thema-editor kun je een aangepast lettertype uploaden en vervolgens dat lettertype gebruiken in pagina's en berichten. Lettertypebestanden worden ondersteund in de volgende formaten: TTF, OTF, WOFF.

Aangepaste lettertypen uploaden

  • Navigeer naar je inhoud:

    • Website Pagina's: Ga in je HubSpot account naar Marketing > Website > Website pagina's.
    • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.
    • Blog: Ga in je HubSpot account naar Marketing > Website > Blog.
  • Beweeg de muis over je inhoud en klik op Bewerken.
  • Klik in de inhoudseditor op het menu Bewerken en selecteer Thema: [Naam van thema].
  • Klik in het menu aan de linkerkant op een vervolgkeuzemenu voor lettertypen en selecteer Een aangepast lettertype uploaden.
  • Voer in het rechterpaneel een label in voor je lettertype in het veld Lettertypenaam .
  • Klik op Lettertypebestanden kiezen en selecteer een of meer lettertypebestanden, klik dan op Volgende.

add-a-custom-font-to-theme

  • Klik op het vervolgkeuzemenu Font Style 1 en selecteer de stijl die je lettertypebestand gebruikt. Je kunt hetzelfde lettertypebestand op meerdere stijlen instellen.
  • Om extra lettertypestijlen toe te voegen, klik je op + Nog een lettertypestijl toevoegen en voeg je vervolgens je lettertypestijlen toe. Elk geüpload lettertypebestand moet minstens één bijbehorende stijl hebben.
  • Wanneer je alle lettertypestijlen hebt toegevoegd, klik je op Klaar.

Aangepaste lettertypen bewerken

Zodra je een aangepast lettertype hebt geüpload in de thema-editor, kun je extra lettertypes uploaden, bestaande lettertypes aanpassen met extra lettertypestijlen of lettertypes verwijderen.

  • Navigeer naar je inhoud:

    • Website Pagina's: Ga in je HubSpot account naar Marketing > Website > Website pagina's.
    • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.
    • Blog: Ga in je HubSpot account naar Marketing > Website > Blog.
  • Beweeg de muis over je inhoud en klik op Bewerken.
  • Klik in de inhoudseditor op het menu Bewerken en selecteer Thema: [Naam van thema].
  • Klik in het menu aan de linkerkant op om de sectie Lettertypen uit te vouwen.
  • Klik op een font dropdown menu en selecteerManage custom fonts.
  • Om een nieuw lettertype toe te voegen, klik je op Een aangepast lettertype toevoegen in het dialoogvenster.
  • Een lettertype bewerken:
    • Klik in het dialoogvenster op het vervolgkeuzemenu Acties naast het lettertype en selecteer Bewerken.
    • Om de naam van het lettertype te wijzigen, klik je op Bewerken naast de naam van het lettertype en voer je een nieuwe naam in.
    • Om extra lettertypestijlen toe te voegen, klik je op Nog een lettertypestijl toevoegen, klik je op het vervolgkeuzemenu Lettertypestijl en selecteer je een stijl. Klik op Uploaden en upload een lettertypebestand.
    • Om een lettertypestijl te verwijderen, klik je op het pictogram deletededel verwijderen naast de lettertypestijl. Je kunt geen lettertypestijl verwijderen als er geen andere lettertypestijlen in de lijst staan.
    • Klik op Opslaan.
  • Om een lettertype te verwijderen, klik je op het vervolgkeuzemenu Acties in het dialoogvenster en selecteer je Verwijderen.

Let op: het verwijderen van een lettertype verwijdert het uit alle vervolgkeuzemenu's, maar de lettertypebestanden blijven in de bestandentool staan totdat ze daar verwijderd worden.


  • Klik op Klaar als je klaar bent met het bewerken van je lettertypen.

Gebruik aangepaste lettertypen in stylesheets

Als alternatief voor het gebruik van standaard webfonts of een fontbibliotheek zoals Google Fonts, kun je fontbestanden hosten in de file tool en er vervolgens naar verwijzen in je stylesheet.

Let op: aangepaste lettertypen zijn alleen beschikbaar in accounts met toegang tot de design manager en moeten worden toegepast met CSS. Als je een aangepast lettertype toevoegt, wordt het lettertype niet toegevoegd aan de opmaak van vervolgkeuzemenu's in de inhoudseditor.

Om een lettertype te gebruiken in inhoud, upload je de bestanden van het lettertype naar de bestandentool. Het is aan te raden om ten minste .woff, .ttf en .eot versies van het lettertype te uploaden om ervoor te zorgen dat je lettertype in alle browsers wordt geladen. Je kunt de expertmodus van Font Squirrel's converter gebruiken om extra bestandsformaten te genereren.

  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Bestanden.
  • Klik op Bestanden uploaden.
  • Selecteer de lettertypebestanden op de harde schijf van je computer en klik vervolgens op Openen.
  • Klik op de naam van een geüpload lettertypebestand.
  • Klik in het rechterpaneel op URL kopiëren om de URL te kopiëren waar het bestand wordt gehost. Je hebt de URL nodig voor het lettertype in elk bestandsformaat.

Een aangepast lettertype gebruiken in een stylesheet

Zodra je een aangepast lettertype hebt toegevoegd aan de bestanden-tool, kun je ernaar verwijzen in een stylesheet. Voor elke lettertypestijl (cursief, vet, etc.) heb je een aparte @font-face regel nodig. Meer informatie over het werken met stylesheets in HubSpot.

  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Ontwerptools.
  • Open in de zoeker het stylesheet dat voor je inhoud is gebruikt.
  • Voor elke lettertypestijl:
    • Plak bovenaan het stylesheet de volgende code:
@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 Your Font Name door de naam van het lettertype.
    • Vervang your_font_file.xxx? door de URL van de bestandentool. Herhaal dit voor elke bestandsindeling.
  • Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen.
  • Klik rechtsboven op Bijwerken of Publiceren om je wijzigingen live te zetten.

sample-custom-font-in-stylesheet

Een aangepast lettertype gebruiken in een aangepaste e-mailsjabloon

Aangepaste lettertypen worden niet ondersteund in de meeste populaire e-mailclients. Om een consistente ervaring voor je lezers te garanderen, is het aan te raden om standaard webfonts te gebruiken in e-mails. Als je echter een aangepast lettertype wilt toevoegen aan een aangepaste e-mailsjabloon, kun je dat doen nadat je het aangepaste lettertype hebt toegevoegd aan de bestanden-tool.

  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Ontwerptools.
  • Open de aangepaste e-mailsjabloon in de zoeker.
  • Voor elke letterstijl:
    • Plak deze code in de <head>-sectie van het sjabloon tussen de <style>....</style>-tags:
@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 Your Font Name door de naam van het lettertype.
    • Vervang your_font_file.xxx? door de URL van de bestandentool. Herhaal dit voor elke bestandsindeling.
  • Voeg in de code van de e-mailtekst het aangepaste lettertype toe in inline styling.
  • Klik rechtsboven op Bijwerken of Publiceren om je wijzigingen live te zetten.

Een aangepast lettertype gebruiken in een CTA (legacy)

Zodra je een aangepast lettertype hebt toegevoegd aan de bestandstool, kun je het gebruiken in oudere CTA's:

  • Ga in je HubSpot account naar Marketing > Lead registratie > CTA knoppen.
  • Ga met de muis over een CTA en klik op Acties > Bewerken.
  • Klik in het rechterpaneel op Geavanceerde opties.
  • Plak deze code in het tekstvak:

font-family: 'Your Font Name';

  • Vervang Your Font Name door de naam van het lettertype.
  • Klik rechtsonder op Volgende. Klik vervolgens op Opslaan.

set-custom-font-for-cta

Een aangepast lettertype gebruiken in een aangepaste module

Zodra je een aangepast lettertype hebt toegevoegd aan de bestandstool, kun je het gebruiken in aangepaste blog- of paginamodules. Leer hoe je een aangepast lettertype toevoegt aan een aangepaste gecodeerde e-mailsjabloon.

  • Ga in je HubSpot account naar Marketing > Bestanden en templates > Ontwerptools.
  • Open de aangepaste module in de zoeker.
  • Plak de volgende code in de module.css sectie:
@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 Your Font Name door de naam van het lettertype.
  • Vervang your_font_file.xxx? door de URL van de bestandentool. Herhaal dit voor elke bestandsindeling.
  • Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen.
  • Klik rechtsboven op Wijzigingen publiceren om je wijzigingen live te zetten.

custom-module-custom-font

Was dit artikel nuttig?
Dit formulier wordt alleen gebruikt voor feedback op documentatie. Ontdek hoe je hulp krijgt met HubSpot.