Lettertypen gebruiken in HubSpot

De lettertypen 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 weblettertypen (zoals Google Fonts) en aangepaste lettertypen aanvullende beperkingen hebben, zoals hieronder beschreven: 

Let op: niet alle inhoudstypen zijn beschikbaar in alle accounts. De inhoudstypen die beschikbaar zijn voor de abonnementen in uw HubSpot-account vindt u in de Product- en dienstencatalogus. 

Gebruik standaardlettertypen in rich text-modules

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

1. Navigeer naar uw content:

   • Webpagina's: Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
   • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
   • E-mail: Ga in je HubSpot-account naar Marketing > E-mail.
2. Klik op de naam van uw inhoud. 
3. Klik in de inhoudseditor op eenrich text-module en selecteer vervolgens de tekst die u wilt bewerken. 
4. Klik in de rich text-werkbalk op hetvervolgkeuzemenu Lettertypeen selecteer een lettertype. De volgende lettertypen zijn beschikbaar in rich text-modules: 
   • Merklettertypen

   • Andale Mono*

   • Arial

   • Book Antiqua*

   • Courier New

   • Georgia

   • Helvetica

   • Impact*

   • Lato**
   • Merriweather**

• • Monaco*

• • Symbol*

  • Tahoma

  • Terminal*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Niet beschikbaar in de drag-and-drop e-maileditor.

**Alleen beschikbaar als weblettertype in de drag-and-drop e-maileditor.

Weblettertypen gebruiken

Weblettertypen zijn standaard beschikbaar in de inhoudseditor.

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

Let op: webfonts kunnen niet worden geselecteerd in het dropdownmenu voor lettertypen van de rich text-editor.

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

1. Ga naar fonts.google.com.
2. Voer in de zoekbalk eenlettertypenaam in. 
3. Klik op de lettertypenaam om een lijst met beschikbare stijlen te bekijken die u kunt importeren.
4. Klik naast elke stijl die u wilt importeren op + Selecteer deze stijl
5. Selecteer in het rechterpaneel@import inhetgedeelte Gebruik op het web. 
6. Kopieer de code van het lettertype: 
   • Kopieer in het gedeelte Gebruik op het web de @import-code zonder de tag <style>.
   • Kopieer in hetveld CSS-regels om families te specificeren decodevoor het instellen van CSS-regels. 

Zodra u de code van Google Fonts hebt, kunt u het lettertype toevoegen aan uw HubSpot-content: 

• Een Google-lettertype gebruiken in een stylesheet
• Een Google-lettertype gebruiken in een aangepaste e-mailsjabloon
• Een Google-lettertype gebruiken in een CTA (legacy)
• Gebruik een Google-lettertype in een formulier
• Gebruik een Google-lettertype in een aangepaste module

Gebruik een Google-lettertype in een stylesheet

1. Kopieer de @import-code van het lettertype uit Google Fonts.
2. Ga in je HubSpot-account naar Inhoud > Design Manager.
3. Open in de finder het stylesheet dat voor uw inhoud wordt gebruikt.
4. Plak de @import-code in regel 1 van het stylesheet. 
5. Voeg de code voor het instellen van CSS-regels toe aan de juiste selectors in het stylesheet.
6. Klik rechtsboven op Wijzigingenpubliceren om uw wijzigingen live te zetten. 

Gebruik een Google-lettertype in een aangepast gecodeerd e-mailsjabloon

1. Kopieer de @import-code van het lettertype uit Google Fonts.
2. Ga in je HubSpot-account naar Inhoud > Design Manager.
3. Open het aangepaste e-mailsjabloon in de finder.
4. Plak de @import-code in het gedeelte<head> van de sjabloon tussen de tags <style>....</style>. 
5. Voeg in de code van de e-mailtekst het aangepaste lettertype toe in inline styling. 
6. Klik rechtsboven op Wijzigingen publicerenom uw wijzigingen live te zetten. 

Een Google-lettertype gebruiken in een CTA (legacy)

1. Kopieer de code van Google voor het instellen van CSS-regels voor dat lettertype.
2. Ga in je HubSpot-account naar Marketing > CTA's.
3. Beweeg de muisaanwijzer over een CTA en klik vervolgens op Acties > Bewerken. 
4. Klik in het rechterpaneel opGeavanceerde opties. 
5. Plak de code van Google voor het instellen van CSS-regels voor dat lettertype in het tekstvak. 
6. Klik rechtsonder opVolgende. Klik vervolgens op Opslaan.

Een Google-lettertype gebruiken in een formulier

1. Ga in je HubSpot-account naar Marketing > Formulieren.
2. Beweeg de muisaanwijzer over de naam van het formulier en klik op Acties > Formulier bewerken of Nieuw formulier maken.
3. Klik in de formuliereditor op het tabblad Stijl en voorbeeld.  
4. Klik in het menu aan de linkerkant op hetgedeelte Stijl.
5. Klik in hetgedeelte Tekstop het vervolgkeuzemenuLettertypefamilie en selecteer eenGoogle-lettertype. 
6. Klik rechtsboven opBijwerken ofPubliceren om uw wijzigingen door te voeren. 

Een Google-lettertype gebruiken in een aangepaste module

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

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Open de aangepaste module in de zoekfunctie aan de linkerkant. Meer informatie over het maken van een aangepaste module.
3. Klik in de inspector aan de rechterkantop devervolgkeuzelijstVeld toevoegenin hetgedeelteVeldenen selecteerLettertype. Meer informatie over het werken met lettertypevelden.
   
   
   
4. Klik rechtsboven op Wijzigingen publiceren omuw wijzigingen live te zetten. 

5. Navigeer naar uw inhoud:

   • Websitpagina's: Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
   • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
6. Klik op de naam van de inhoud met behulp van de aangepaste module. 
7. Klik in de inhoudseditor op deaangepaste module. 
8. Klik in de zijbalkeditor op hetvervolgkeuzemenu van het veld Lettertypeen selecteer eenGoogle-lettertype. 

Aangepaste lettertypen gebruiken

Als alternatief voor het gebruik van standaardweblettertypen of een lettertypebibliotheek zoalsGoogle Fonts, kunt u lettertypebestanden uploaden en deze vervolgens gebruiken in thema's of ernaar verwijzen in stylesheets.

Aangepaste lettertypen gebruiken in thema's

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

Aangepaste lettertypen uploaden voor pagina's of berichten

Zodra je aangepaste lettertypen hebt geüpload, zijn ze beschikbaar voor pagina's, berichten of kennisbankartikelen.

1. Navigeer naar uw inhoud:

   • Websitpagina's: Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
   • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
2. Klik op de naam van uw inhoud. 
3. Klik in de inhoudseditor op hetmenu Bewerkenen selecteerThema: [Naam van thema].
4. Klik in het menu aan de linkerkant op een willekeurigdropdownmenu voor lettertypen en selecteerMerklettertypen beheren.
5. Volg de stappen in dit Knowledge Base-artikel om uw lettertypen toe te voegen of te bewerken.

Aangepaste lettertypen uploaden voor Knowledge Base-artikelen

Zodra u aangepaste lettertypen hebt geüpload, zijn deze beschikbaar voor pagina's, berichten of Knowledge Base-artikelen.

1. Ga in je HubSpot-account naar Service > Kennisdatabase.
2. Klik rechtsboven opSjabloon aanpassen.
3. Klik in de linkerzijbalk op het tabblad Ontwerp.
4. Klik in de linkerzijbalk op Lettertypestijlen.
5. Klik op een willekeuriglettertypemenu en selecteerMerklettertypen beheren.
6. Volg de stappen in dit Knowledge Base-artikel om uw lettertypen toe te voegen of te bewerken.

Aangepaste lettertypen bewerken

Nadat u een aangepast lettertype hebt geüpload in de thema-editor, kunt u extra lettertypen uploaden, bestaande lettertypen aanpassen met extra lettertypestijlen of lettertypen verwijderen.

Aangepaste lettertypen gebruiken in stylesheets

Als alternatief voor het gebruik van standaardweblettertypen of een lettertypebibliotheek zoalsGoogle Fonts, kunt u lettertypebestanden hosten in de bestanden-tool en vervolgens naar deze bestanden verwijzen in uw stylesheet. 

Let op: aangepastelettertypen zijn alleen beschikbaar in accounts met toegang tot de ontwerpmanager en moeten worden toegepast met CSS. Als je een aangepast lettertype toevoegt, wordt het lettertypeniet toegevoegd aan de vervolgkeuzemenu's voor opmaak in de inhoudseditor. 

Om een lettertype in inhoud te gebruiken, uploadt u de lettertypebestanden naar de bestanden-tool. Het wordt aanbevolen om ten minste de .woff-, .ttf- en .eot-versies van het lettertype te uploaden om ervoor te zorgen dat uw lettertype in alle browsers wordt geladen. U kunt de Expert-modus vande conversietool van Font Squirrelgebruiken om extra bestandsindelingen te genereren.

1. Ga in je HubSpot account naar Inhoud > Bestanden. Als je de gratis tools van HubSpot gebruikt, ga je naar Marketing > E-mail. Klik rechtsboven op E-mailtools en selecteer Bestanden.
2. Klik opBestanden uploaden. 
3. Selecteer delettertypebestanden op de harde schijf van uw computer en klik vervolgens opOpenen. 
4. Klik op de naam van een geüpload lettertypebestand. 
5. Klik in het rechterpaneelop URL kopiëren om de URL te kopiëren waar het bestand wordt gehost. U hebt de URL voor het lettertype in elk bestandsformaat nodig. 

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, enz.) is een aparte @font-face-regel nodig. Meer informatie over het werken met stylesheets in HubSpot. 

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Open in de finder het stylesheet dat voor uw content wordt gebruikt.
3. Voor elke lettertypestijl: 
   • Plak de volgende code bovenaan het stylesheet: 

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

1. • • Vervang Uw lettertype met denaam van het lettertype.
     • Vervanguw_lettertypebestand.xxx? doordeURL uit de bestanden-tool. Herhaal dit voor elk bestandsformaat.

4. Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen. 
5. Klik rechtsboven op Bijwerken ofPubliceren om uw wijzigingen live te zetten. 

Een aangepast lettertype gebruiken in een aangepaste gecodeerde e-mailsjabloon

Aangepaste lettertypen worden niet ondersteund in de meeste populaire e-mailclients. Om een consistente ervaring voor uw lezers te garanderen, wordt het gebruik van standaardweblettertypen in e-mails 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.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Open de aangepaste gecodeerde e-mailsjabloon in de finder.
3. Voor elke lettertypestijl:
   • Plak deze code in het <head>-gedeelte van de sjabloon tussen de <style>....</style>-tags: 

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

1. • Vervang Uw lettertype met denaam van het lettertype.
   • Vervanguw_lettertypebestand.xxx? doordeURLuit de bestanden-tool. Herhaal dit voor elk bestandsformaat. 

4. Voeg in de code van de e-mailtekst het aangepaste lettertype toe in inline styling. 
5. Klik rechtsboven op Bijwerken ofPubliceren om uw wijzigingen live te zetten. 

Een aangepast lettertype gebruiken in een CTA

Nadat u een aangepast lettertype aan uw thema hebt toegevoegd, kunt u het gebruiken met CTA's:

1. Ga in je HubSpot-account naar Marketing > CTA's.
2. Klik linksboven op het vervolgkeuzemenu en selecteer CTA's
3. Beweeg de muisaanwijzer over een CTA en klik vervolgens op Acties > Bewerken. 
4. Klik in het linkerpaneel van de CTA-editor op het tabblad Ontwerp. 
5. Klik op de sectie Stijlen om deze uit te vouwen.
6. Klik op het vervolgkeuzemenu Primaire lettertype en selecteer uw aangepaste lettertype. 
7. Ga verder met het maken van uw CTA. 

Een aangepast lettertype gebruiken in een CTA (legacy)

Net als bij CTA's kunt u na het uploaden van een aangepast formulierbestand dit gebruiken met legacy CTA's:

1. Ga in je HubSpot-account naar Marketing > CTA's.
2. Beweeg de muisaanwijzer over een CTA en klik vervolgens op Acties > Bewerken. 
3. Klik in het rechterpaneel opGeavanceerde opties. 
4. Plak deze code in het tekstvak:
   
   font-family: 'Uw lettertypenaam';
5. Vervang Uw lettertypemet denaam van het lettertype.
6. Klik rechtsonder opVolgende. Klik vervolgens op Opslaan. 

Een aangepast lettertype gebruiken in een aangepaste module

Zodra u een aangepast lettertype hebt toegevoegd aan de bestanden-tool, kunt u het gebruiken in aangepaste blog- of paginamodules. Lees hoe u een aangepast lettertype toevoegt aan een aangepast gecodeerd e-mailsjabloon. 

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Open de aangepaste module inde finder.
3. Plak de volgende code in het gedeelte module.css: 

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

5. Vervang Uw lettertype met denaam van het lettertype.
6. Vervanguw_lettertypebestand.xxx? doordeURLuit de bestanden-tool. Herhaal dit voor elk bestandsformaat.
7. Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen. 
8. Klik rechtsboven op Wijzigingen publicerenom uw wijzigingen live te zetten.