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: september 27, 2021

Geldt voor:

Alle producten en plannen

De lettertypes die beschikbaar zijn voor content in HubSpot zijn afhankelijk van het type content en het type lettertype. Bepaalde standaardlettertypen zijn beschikbaar in alle content editors, terwijl Google Fonts en aangepaste lettertypen aanvullende beperkingen hebben, die hieronder worden beschreven:

Type inhoud	Lettertype
	Standaard lettertypen	Google lettertypen	Aangepaste lettertypen
Pagina - starter sjablonen	✓	Beschikbaar op het tabblad Ontwerp van de inhoudseditor	Niet beschikbaar
Pagina - thema sjablonen	✓	Beschikbaar in thema instellingen en via stylesheet	Beschikbaar via stylesheet
Pagina - gecodeerd sjabloon	✓	Beschikbaar via stylesheet of aangepaste module	Beschikbaar via stylesheet
Blog	✓	Beschikbaar via stylesheet of aangepaste module	Beschikbaar via stylesheet
E-mail	Sommige standaardlettertypes zijn niet beschikbaar in de e-maileditor met slepen en neerzetten	Alleen beschikbaar voor aangepaste gecodeerde e-mailsjablonen; niet ondersteund in de meeste e-mailclients	Alleen beschikbaar voor aangepaste gecodeerde e-mailsjablonen; niet ondersteund in de meeste e-mailclients
Kennisbank	✓	Beschikbaar op het tabbladOntwerpvan 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	✓	✓	✓

Standaardlettertypen gebruiken

Standaardlettertypes kunnen in alle soorten inhoud worden gebruikt en zijn zo ontworpen dat ze op de meeste platforms en apparaten kunnen worden geladen.

Navigeer naar je inhoud:
- Website pagina's: { local.navWebsitePages }}
- Landingspagina's: { local.navLandingPages }}
- Blog: Navigeer in uw HubSpot account naar Marketing > Website > Blog.
- Kennisbank: Navigeer in uw HubSpot account naar Service > Kennisbank.
- Email: Navigeer in uw HubSpot-account naar Marketing > E-mail.
Ga met uw muis over uw inhoud en klik opBewerken.
Klik in de inhoudseditor op eenrijke tekstmodule en markeer vervolgens de tekst die u wilt bewerken.
Klik in de rich text werkbalk op hetFontdropdown menu en selecteer een font. De volgende lettertypes zijn beschikbaar in rijke tekstmodules:
- Andale Mono*
- Arial
- Boek Antiqua*
- Koerier Nieuw
- Georgia
- Helvetica
- Impact*
- Lato**
- Merriweather**

- Monaco.

- Symbol*
- Tahoma
- Terminal*
- Times New Roman
- Trebuchet MS
- Verdana

*Niet beschikbaar in de "drag and drop" email editor.

**Alleen beschikbaar als weblettertype in de e-maileditor met slepen en neerzetten.

Gebruik Google-lettertypes

Google Fonts zijn beschikbaar in de content editor voor pagina's die gebruik maken van starter templates en thema's, maar ook voor kennisbank artikelen en aangepaste modules. Als u een Google-lettertype op andere pagina's wilt gebruiken, moet u de importcode van het lettertype kopiëren, deze in het stylesheet van de pagina plakken en vervolgens het lettertype toepassen met CSS-regels.

Lees meer over hoe ontwikkelaars lettertypevelden kunnen gebruiken om Google Fonts toe te voegen aan thema's en aangepaste modules in HubSpot's ontwikkelaarsdocumentatie.

Let op: Google Fonts kunnen niet worden geselecteerd in het lettertype dropdown menu van de rich text editor.

Navigeer naar fonts.google.com.
Voer in de zoekbalk eenlettertypenaam in.
Klik op de naam van het lettertype om een lijst te zien van stijlen die beschikbaar zijn om te importeren.
Naast elke stijl die u wilt importeren, klikt u op + Selecteer deze stijl
In het rechterpaneel, selecteer@importin de sectieGebruik op het web.
Kopieer de code van het lettertype:
- Kopieer in de sectie Use on the web de @import code zonder de <style> tag.
- Kopieer in het veldCSS-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 content:

Gebruik een Google Font in een stylesheet
Gebruik een Google Font in een aangepaste gecodeerde e-mail template
Gebruik een Google-lettertype in een CTA
Gebruik een Google Font in een aangepaste module

Gebruik een Google Font in een stylesheet

Kopieer de @import code van het lettertype van Google Fonts.
Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
Open in de Finder 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.

add-google-fonts-imported-font-to-stylesheet

Klik rechtsboven opPubliceren ofBijwerkenom uw wijzigingen live te zetten.

Gebruik een Google Font in een aangepaste gecodeerde e-mail template

Hoewel Google Fonts worden ondersteund door Apple Mail en een paar andere e-mailclients, is de brede ondersteuning beperkt en ondersteunen de meeste populaire e-mailclients alleen standaardweblettertypes. Meer informatie over het selecteren van de standaardlettertypen die in de bijgewerkte klassieke e-maileditor worden gebruikt.

Om een Google Font toe te voegen aan een aangepaste gecodeerde email sjabloon:

Kopieer de @import code van het lettertype van Google Fonts.
Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
Open in de zoeker de aangepaste gecodeerde email sjabloon.
In de<head> sectie van het sjabloon, plak de @import code tussen de <style>....</style> tags.
In de code van de e-mail body, voeg het aangepaste lettertype toe in inline styling.
Klik rechtsboven op BijwerkenofPubliceren om uw wijzigingen live te zetten.

Gebruik een Google-lettertype in een CTA

Kopieer Google's code voor het instellen van CSS regels voor dat lettertype.
Navigeer in uw HubSpot-account naar Marketing > Lead capture > CTA's.
Ga met de muis over een CTA, klik dan op het Actions dropdown menu en selecteerEdit.
Klik in het rechterpaneel opGeavanceerde opties.
Plak in het tekstvak Google's code voor het instellen van CSS regels voor dat lettertype.
Klik rechtsonder opVolgende. Klik dan op Opslaan.

Gebruik een Google Font in een aangepaste module

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

Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.

Open de aangepaste module in de zoeker aan de linkerkant. Meer informatie over het maken van een aangepaste module.
Klik in de inspector aan de rechterkant op deAdd fielddropdown in deFieldssectie en selecteerFont. Meer informatie over het werken met lettertypevelden.

click-add-field

Klik rechtsboven op Wijzigingen publicerenom uw wijzigingen live te zetten.
Navigeer naar je inhoud:
- Website pagina's: { local.navWebsitePages }}
- Landingspagina's: { local.navLandingPages }}
- Blog: Navigeer in uw HubSpot account naar Marketing > Website > Blog.
Ga met de muis over de inhoud van de aangepaste module en klik opBewerken.
Klik in de inhoudseditor op deaangepaste module.
Klik in de zijbalk editor op hetFont velddropdown menu en selecteer eenGoogle font.

Gebruik aangepaste lettertypen

Als alternatief voor het gebruik van standaard web fonts of een font bibliotheek zoalsGoogle Fonts, kun je font bestanden hosten in de bestanden tool, en er dan naar verwijzen in je stylesheet.

Let op:aangepaste lettertypes moeten worden toegepast via CSS.Het toevoegen van een aangepast lettertype zal het lettertypeniet toevoegen aan de styling van dropdown menu's in de inhoudseditor.

Om een lettertype in content te gebruiken, uploadt u de bestanden van het lettertype naar de bestandentool. HubSpot raadt aan om een minimum van de.woff, .ttf, & .eot versies van het lettertype te uploaden om te verzekeren dat uw lettertype in alle browsers wordtgeladen.

s. U kunt de Expert mode gebruiken opFont Squirrel's converter tool om extra bestandsformaten te genereren.

Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Bestanden.
Klik opBestanden uploaden.
Selecteer op de harde schijf van uw computer delettertypebestanden en klik vervolgens opOpenen.
Klik op de naam van een geüpload lettertypebestand.
In het rechterpaneel, klik opURL kopiëren om de URL te kopiëren waar het bestand gehost wordt. U hebt de URL voor het lettertype in elk bestandsformaat nodig.

Gebruik een aangepast lettertype in een stylesheet

Als je eenmaal een aangepast lettertype hebt toegevoegd aan de bestanden tool, kun je er naar verwijzen in een stylesheet. Voor elke lettertypestijl (cursief, vet, etc.) is een aparte @font-face regel nodig. Leer meer over het werken met stylesheets in HubSpot.

Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
Open in de Finder het stylesheet dat voor je inhoud is gebruikt.
Voor elke lettertype stijl:
- Bovenaan het stylesheet plak je de volgende code:

@font-face { font-family: 'Uw lettertype naam'; src: url('uw_font_file.eot?') format('eot'), url('uw_font_file.woff') format('woff'), url('uw_font_file.ttf') format('truetype');}

- Vervang de lettertypenaam door denaam van het lettertype.
- Vervanguw_font_file.xxx?door deURLuit de bestanden tool. Herhaal dit voor elk bestandsformaat.
Maak CSS regels met de font-family eigenschap om het aangepaste lettertype toe te passen.
Klik rechtsboven op BijwerkenofPubliceren om uw wijzigingen live te zetten.

sample-custom-font-in-stylesheet

Gebruik een aangepast lettertype in een aangepaste gecodeerde e-mailsjabloon

Aangepaste lettertypes worden niet ondersteund in de meeste populaire e-mailclients. Om een consistente ervaring voor uw lezers te garanderen, standaard weblettertypen gebruiken in e-mails wordt aanbevolen. Als u echter een aangepast lettertype wilt toevoegen aan een aangepaste gecodeerde e-mailsjabloon, kunt u dit doen nadat u het aangepaste lettertype hebt toegevoegd aan de bestandstool.

Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
Open in de zoeker de aangepaste gecodeerde email sjabloon.
Voor elke lettertype stijl:
- In de <head> sectie van het sjabloon, plak deze code tussen de <style>....</style> tags:

@font-face { font-family: 'Uw lettertype naam'; src: url('uw_font_file.eot?') format('eot'), url('uw_font_file.woff') format('woff'), url('uw_font_file.ttf') format('truetype');}

- Vervang de lettertypenaam door denaam van het lettertype.
- Vervanguw_font_file.xxx?door deURLuit de bestanden tool. Herhaal dit voor elk bestandsformaat.
In de code van de e-mail body, voeg het aangepaste lettertype toe in inline styling.
Klik rechtsboven op BijwerkenofPubliceren om uw wijzigingen live te zetten.

Gebruik een aangepast lettertype in een CTA

Zodra u een aangepast lettertype hebt toegevoegd aan de bestandstool, kunt u het gebruiken in CTA's:

Navigeer in uw HubSpot-account naar Marketing > Lead capture > CTA's.
Ga met de muis over een CTA, klik dan op het Actions dropdown menu en selecteerEdit.
Klik in het rechterpaneel opGeavanceerde opties.
In het tekstvak, plak deze code:

font-family: "Uw lettertype naam";

Vervangde lettertypenaamdoor denaam van het lettertype.
Klik rechtsonder opVolgende. Klik dan op Opslaan.

set-custom-font-for-cta

Gebruik een aangepast lettertype in een aangepaste module

Zodra u een aangepast lettertype hebt toegevoegd aan de bestandentool, kunt u het gebruiken in aangepaste modules:

Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
In de Finder, open de aangepaste module.
In de module.css sectie, plak de volgende code:

@font-face { font-family: 'Uw lettertype naam'; src: url('uw_font_file.eot?') format('eot'), url('uw_font_file.woff') format('woff'), url('uw_font_file.ttf') format('truetype');}

Vervang de lettertypenaam door denaam van het lettertype.
Vervanguw_font_file.xxx?door deURLuit de bestanden tool. Herhaal dit voor elk bestandsformaat.
Maak CSS regels met de font-family eigenschap om het aangepaste lettertype toe te passen.

custom-module-custom-font

Klik rechtsboven op Wijzigingen publiceren om uw wijzigingen live te zetten.