Lettertypen gebruiken in HubSpot

Lettertypen in HubSpot zijn op verschillende manieren beschikbaar, afhankelijk van het inhoudstype en het lettertype. Sommige standaardlettertypen zijn beschikbaar in alle inhoudseditors. Weblettertypen en aangepaste lettertypen moeten mogelijk worden toegevoegd aan thema-instellingen, stylesheets, aangepaste modules of geprogrammeerde sjablonen.

Voordat je aan de slag gaat

Lees de vereisten en aandachtspunten door voordat je lettertypen in HubSpot gaat gebruiken.

Beperkingen en overwegingen begrijpen

• Niet alle inhoudstypen zijn beschikbaar in alle accounts. Raadpleeg de Product- en servicecatalogus om te controleren welke inhoudstypen beschikbaar zijn voor uw abonnement.
• Raadpleeg de onderstaande tabel om te zien welke lettertypeopties beschikbaar zijn voor elk inhoudstype:

Standaardlettertypen gebruiken in rich text-modules

Standaardlettertypen worden in alle HubSpot-content ondersteund, hoewel de beschikbare opties en waar je ze kunt toepassen afhankelijk zijn van het contenttype.

1. Ga naar je 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 markeer vervolgens de tekst die u wilt bewerken. 
4. Klik in de werkbalk voor opmaaktekst op hetvervolgkeuzemenu Lettertypeen selecteer een lettertype. De volgende lettertypen zijn beschikbaar in modules voor opmaaktekst:

Weblettertypen gebruiken

Weblettertypen worden in sommige HubSpot-content ondersteund, maar ze zijn niet beschikbaar in het vervolgkeuzemenu 'Lettertype' in de rich text-editor. Afhankelijk van het contenttype kunnen weblettertypen worden toegepast in thema-instellingen, stylesheets, aangepaste modules of gecodeerde sjablonen. 

Ontwikkelaars kunnen het lettertypeveld gebruiken om weblettertypen toe te voegen aan thema's en aangepaste modules. Wanneer weblettertypen op deze manier worden toegevoegd, laadt HubSpot ze rechtstreeks op het domein

van de content

in plaats van ze te laden vanuit een externe dienst.

Gebruik externe diensten zoals Google Fonts door de importcode van het lettertype te kopiëren, deze in de stylesheet van de content te plakken en het lettertype vervolgens via CSS toe te passen:

1. Ga naar fonts.google.com.
2. Voer eenlettertypenaam in de zoekbalk in. 
3. Klik op de naam van het lettertype om een lijst met beschikbare stijlen te bekijken die je kunt importeren.
4. Klik rechtsboven op 'Lettertype ophalen'.
5. Klik rechtsboven op 'Embedcode ophalen'.
6. Selecteer in de rechterkolom @import op het tabblad Web.
7. Kopieer de @import-code zonder de <style> -tag.
8. Kopieer deCSS-klassecode voor het instellen van CSS-regels. 

9. Nadat je de code van Google Fonts hebt gekopieerd, kun je het lettertype toevoegen aan je HubSpot-content: 

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

Een Google Font gebruiken 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 je 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 Font in een op maat gemaakte e-mailsjabloon

Google Fonts worden ondersteund in Apple Mail en enkele andere e-mailclients, maar de brede ondersteuning is beperkt. De meeste populaire e-mailclients ondersteunen alleen standaardweblettertypen. Lees meer over het selecteren van de standaardlettertypen die worden gebruikt in de klassieke e-maileditor. 

Een Google-lettertype toevoegen aan een e-mailsjabloon met aangepaste code: 

1. Kopieer de @import-code van het lettertype uit Google Fonts.
2. Ga in je HubSpot-account naar Inhoud > Design Manager.
3. Open de op maat gemaakte e-mailsjabloon in de finder.
4. Plak in het gedeelte<head> van de sjabloon de @import-code tussen de tags <style>....</style>. 
5. Voeg in het gedeelte <body> van de sjabloon 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 (verouderd)

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 muis over een CTA en klik vervolgens op Acties > Bewerken. 
4. Klik in het rechterpaneel opGeavanceerde opties. 
5. Plak in het tekstvak de code van Google voor het instellen van CSS-regels voor dat lettertype. 
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 muis over de formuliernaam en klik op Acties > Formulier bewerken of Maak een nieuw formulier.
3. Klik in de formuliereditor op het tabblad Stijl en voorbeeld. 
4. Klik in het menu in de linkerzijbalk op hetgedeelte Stijl.
5. Klik in hetgedeelte Tekstop het vervolgkeuzemenuLettertypefamilie en selecteer eenGoogle-lettertype. 
6. Klik rechtsboven opBijwerken ofPubliceren om je wijzigingen live te zetten. 

Een Google-lettertype gebruiken in een aangepaste module

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

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de finder op de naam van een aangepaste module. Meer informatie over het maken van een aangepaste module.
3. Klik in de inspector op het vervolgkeuzemenu Veld toevoegenin hetgedeelte Veldenen selecteer Lettertype. Meer informatie over het werken met lettertypevelden.

4. Klik rechtsboven op Wijzigingen publiceren omuw wijzigingen live te zetten. 
5. Ga naar uw inhoud:
   • 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.
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 Font. 

Aangepaste lettertypen gebruiken

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

Aangepaste lettertypen in thema's gebruiken

Upload in de thema-editor een aangepast lettertype en gebruik dat lettertype vervolgens in pagina's en berichten. Lettertypebestanden worden ondersteund in de volgende formaten: TTF, OTF, WOFF.

Aangepaste lettertypen uploaden voor pagina's of berichten

Nadat u aangepaste lettertypen hebt geüpload, zijn deze beschikbaar voor pagina's, berichten of kennisbankartikelen.

1. Navigeer naar uw inhoud:

   • 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.
2. Klik op de naam van uw inhoud. 
3. Klik in de inhoudseditor op hetmenu Bewerkenen selecteerThema: [Naam van het thema].
4. Klik in het menu in de linkerzijbalk op een willekeuriglettertype-uitklapmenu en selecteerMerklettertypen beheren.
5. Volg de stappen in dit Knowledge Base-artikel om je lettertypen toe te voegen of te bewerken.

Aangepaste lettertypen uploaden voor kennisbankartikelen

Nadat u aangepaste lettertypen hebt geüpload, zijn deze beschikbaar voor pagina's, berichten of kennisbankartikelen.

1. Ga in je HubSpot-account naar Service > Kennisdatabase.
2. Klik rechtsboven op desjabloon Aanpassen.
3. Klik in de linkerzijbalk op het tabblad Ontwerp.
4. Klik in de linkerzijbalk op Lettertypestijlen.
5. Klik op een willekeurig lettertype-vervolgkeuzemenu en selecteer'Merklettertypen beheren'.
6. Volg de stappen in dit Knowledge Base-artikel om je 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 bestands-tool en er vervolgens naar verwijzen in uw stylesheet.

Let op: aangepastelettertypen zijn alleen beschikbaar in accounts met toegang tot de ontwerpmanager en moeten worden toegepast met CSS. Het toevoegen van een aangepast lettertype voegt het lettertypeniet toe aan de dropdownmenu's voor opmaak in de inhoudseditor.

Om een lettertype in inhoud te gebruiken, uploadt u de bestanden van het lettertype naar de bestands-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 inde conversietool van Font Squirrelgebruiken om extra bestandsformaten 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 vervolgensop Openen.
4. Klik op de naam van een geüpload lettertypebestand.
5. Klik in het rechterpaneel opURL 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

Nadat 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. Lees meer 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 je content wordt gebruikt.
3. 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 'Uw lettertypenaam' door denaam van het lettertype.
  • Vervangyour_font_file.xxx? doordeURL uit de bestandstool. 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 'Update' of'Publish' om uw wijzigingen live te zetten. 

Gebruik een aangepast lettertype in een zelfgecodeerde e-mailsjabloon

Aangepaste lettertypen worden in de meeste populaire e-mailclients niet ondersteund. 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 zelfgecodeerde e-mailsjabloon, kunt u dit doen zodra u het aangepaste lettertype aan de bestanden-tool hebt toegevoegd.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de Finder op de naam van uw zelfgecodeerde e-mailsjabloon.
3. Voor elke lettertypestijl:
   • Plak in het gedeelte <head> van de sjabloon deze code tussen de tags <style>....</style>: 

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

1. • Vervang 'Uw lettertypenaam' door denaam van het lettertype.
   • Vervangyour_font_file.xxx? doordeURLuit de bestandstool. 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 je wijzigingen live te zetten. 

Gebruik een aangepast lettertype in een CTA

Nadat u een aangepast lettertype aan uw thema hebt toegevoegd, kunt u het gebruiken in 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 muis 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 het gedeelte Stijlen om het uit te vouwen.
6. Klik op het vervolgkeuzemenu 'Primair lettertype' en selecteer je 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, nadat u een aangepast lettertypebestand hebt geüpload, dit gebruiken met legacy-CTA's.

1. Ga in je HubSpot-account naar Marketing > CTA's.
2. Beweeg de muis 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: 'Your Font Name';
5. Vervang 'Naam van uw lettertype' doordenaam van het lettertype.
6. Klik rechtsonder opVolgende. Klik vervolgens op Opslaan.

Een aangepast lettertype gebruiken in een aangepaste module

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

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de finder op de naam van de aangepaste module.
3. Plak in de module-editor, in het gedeeltemodule.css, 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');}

5. • Vervang 'Uw lettertypenaam' door denaam van het lettertype.
   • Vervangyour_font_file.xxx? doordeURLuit de bestandstool. Herhaal dit voor elk bestandsformaat.
6. Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen. 
7. Klik rechtsboven op Wijzigingen publicerenom je wijzigingen live te zetten.