Lettertypen gebruiken in HubSpot

Lettertypen in HubSpot zijn op verschillende manieren beschikbaar, afhankelijk van het type inhoud en het type 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 begint

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

Beperkingen en overwegingen begrijpen

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

Standaardlettertypen gebruiken in rich text-modules

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

1. Navigeer naar je inhoud:

   • Websitepagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Websitepagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Websitepagina's.
   • Landingspagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Landingspagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Landingspagina's.
   • Blog: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Blog. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Blog.
   • E-mail: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > E-mail. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > E-mail.
2. Klik op de naam van je inhoud.
3. Klik in de inhoudseditor op eenrich-text-module en selecteer vervolgens de tekst die je wilt bewerken. 
4. Klik in de werkbalk voor opmaak op hetvervolgkeuzemenu ‘Lettertype’en selecteer een lettertype. De volgende lettertypen zijn beschikbaar in rich text-modules:

Weblettertypen gebruiken

Weblettertypen worden in sommige HubSpot-inhoud ondersteund, maar ze zijn niet beschikbaar in het vervolgkeuzemenu ‘Lettertype’ in de rich text-editor. Afhankelijk van het type inhoud kunnen webfonts worden toegepast in thema-instellingen, stylesheets, aangepaste modules of geprogrammeerde sjablonen. 

Ontwikkelaars kunnen het lettertypeveld gebruiken om weblettertypen toe te voegen aan thema’s en aangepaste modules. Wanneer webfonts op deze manier worden toegevoegd, laadt HubSpot ze rechtstreeks op het domein van de inhoud in plaats van ze via een externe dienst te laden.

Gebruik diensten van derden, 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 via CSS toe te passen:

1. Ga naar fonts.google.com.
2. Typde naam van eenlettertype in de zoekbalk. 
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 tag <style> .
8. Kopieer decode van de CSS-klasse om CSS-regels in te stellen. 

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

• • Een Google Font gebruiken in een stylesheet
  • Een Google Font gebruiken in een zelfgeprogrammeerde e-mailsjabloon
  • Een Google Font gebruiken in een CTA (verouderde methode)
  • Een Google Font 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. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
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 toe waarmee CSS-regels worden toegepast op de betreffende selectors in het stylesheet.
6. Klik rechtsboven op ‘Wijzigingen publiceren’ om je wijzigingen live te zetten. 

Een Google Font gebruiken in een zelfgeprogrammeerde e-mailsjabloon

Google Fonts worden ondersteund in Apple Mail en enkele andere e-mailprogramma’s, maar de ondersteuning is over het algemeen beperkt. De meeste populaire e-mailprogramma's ondersteunen alleen standaard webfonts. Lees meer over het selecteren van de standaardlettertypen die in de klassieke e-maileditor worden gebruikt. 

Een Google Font toevoegen aan een zelfgeprogrammeerde e-mailsjabloon: 

1. Kopieer de @import-code van het lettertype uit Google Fonts.
2. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
3. Open in de Finder het zelfgecodeerde e-mailsjabloon.
4. In het<head> sectie van het sjabloon plakt u de @import-code tussen de <style>....</style> tags. 
5. Voeg in het gedeelte ` <body> ` van de sjabloon het aangepaste lettertype toe via inline opmaak. 
6. Klik rechtsboven op ‘Wijzigingen publiceren’om je wijzigingen live te zetten. 

Een Google Font gebruiken in een CTA (verouderde methode)

1. Kopieer de code van Google om CSS-regels voor dat lettertype in te stellen.
2. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > CTA's. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > CTA's.
3. Beweeg de muisaanwijzer over een CTA en klik vervolgens op de acties >Bewerken. 
4. Klik in het rechtervenster op‘Geavanceerde opties’. 
5. Plak in het tekstvak de code van Google waarmee je CSS-regels voor dat lettertype kunt instellen. 
6. Klik rechtsonder op‘Volgende’. Klik vervolgens op Opslaan.

Een Google Font gebruiken in een formulier

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > Formulier. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > Formulier.
2. Beweeg de muisaanwijzer over de naam van het formulier en klik op ‘Acties’ > ‘Formulier bewerken’ of ‘Nieuw formulier aanmaken’.
3. Klik in de formuliereditor op het tabblad ‘Voorbeeld’ van de stijl & . 
4. Klik in het menu aan de linkerkant op hetgedeelte ‘Stijl’.
5. Klik in hetgedeelte ‘Tekst’op het vervolgkeuzemenu‘Lettertypefamilie’ en selecteer eenGoogle-lettertype. 
6. 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 in e-mailsjablonen worden gebruikt.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik in de Finder op de naam van een aangepaste module. Lees meer over het maken van een aangepaste module.
3. Klik in de inspector in hetgedeelte ‘Velden’ op het vervolgkeuzemenu ‘Veld toevoegen’ en selecteer ‘Lettertype’. Lees meer over het werken met lettertypevelden.

4. Klik rechtsboven op ‘Wijzigingen publiceren’ omje wijzigingen live te zetten. 
5. Navigeer naar je inhoud:
   • Websitepagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Websitepagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Websitepagina's.
   • Landingspagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Landingspagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Landingspagina's.
   • Blog: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Blog. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > 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 zijbalk-editor op hetvervolgkeuzemenu van het veld ‘Lettertype’en selecteer eenGoogle Font. 

Aangepaste lettertypen gebruiken

Als alternatief voor het gebruik van standaard weblettertypen of een lettertypebibliotheek zoalsGoogle Fonts kun je lettertypebestanden uploaden en deze vervolgens in thema’s gebruiken of ernaar verwijzen in stylesheets. 

Aangepaste lettertypen gebruiken in thema’s

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

Aangepaste lettertypen uploaden voor pagina’s of berichten

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

1. Navigeer naar je inhoud:

   • Websitepagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Websitepagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Websitepagina's.
   • Landingspagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Landingspagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Landingspagina's.
   • Blog: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Blog. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Blog.
2. Klik op de naam van je inhoud. 
3. Klik in de inhoudseditor op hetmenu ‘Bewerken’en selecteer‘Thema: [Naam van het thema]’.
4. Klik in het menu in de linkerzijbalk op een willekeurigvervolgkeuzemenu voor lettertypen en selecteer‘Merklettertypen beheren’.
5. Volg de stappen in dit Knowledge Base-artikel om lettertypen toe te voegen of te bewerken.

Aangepaste lettertypen uploaden voor kennisbankartikelen

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

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Service > Kennisdatabase. Als Meer niet in je account verschijnt, navigeer dan direct naar Service > Kennisdatabase.
2. Klik rechtsboven op de optie‘Sjabloon aanpassen’.
3. Klik in de linkerzijbalk op het tabblad ‘Ontwerp ’.
4. Klik in de linkerzijbalk op ‘Lettertypestijlen’.
5. Klik op een willekeurigvervolgkeuzemenu voor lettertypen en selecteer‘Merklettertypen beheren’.
6. Volg de stappen in dit Knowledge Base-artikel om lettertypen toe te voegen of te bewerken.

Aangepaste lettertypen bewerken

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

Aangepaste lettertypen gebruiken in stylesheets

Als alternatief voor het gebruik van standaard webfonts of een lettertypebibliotheek zoalsGoogle Fonts, kun je lettertypebestanden opslaan in de bestandsmodule en er vervolgens naar verwijzen in je stylesheet. 

Let op: aangepastelettertypen zijn alleen beschikbaar in accounts met toegang tot de Design Manager en moeten via CSS worden toegepast. Als je een aangepast lettertype toevoegt, wordt dit lettertypeniet opgenomen in de keuzelijst met opmaakopties in de inhoudseditor.

Om een lettertype in je inhoud te gebruiken, upload je de bestanden van het lettertype naar de bestandsfunctie. Het wordt aanbevolen om ten minste de .woff-,.ttf- en .eot-versies van het lettertype te uploaden, zodat je lettertype in alle browsers wordt geladen. Je kunt de Expert-modus vande conversietool van Font Squirrelgebruiken om extra bestandsformaten te genereren.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Bestanden. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Bestanden.
2. Klik op‘Bestanden 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 rechtervensterop ‘URL kopiëren ’ om de URL te kopiëren waar het bestand is gehost. Je hebt de URL van het lettertype voor elk bestandsformaat nodig.

Een aangepast lettertype gebruiken in een stylesheet

Nadat je een aangepast lettertype aan de bestandsfunctie hebt toegevoegd, 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. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Open in de Finder het stylesheet dat voor je inhoud wordt gebruikt.
3. Voor elke lettertypestijl: 
   • Plak de volgende code bovenaan het stylesheet: 

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


• • Vul hier de naam van het lettertype in .
  • Vervangyour_font_file.xxx? doordeURL uit de tool ‘Bestanden’. Herhaal dit voor elk bestandsformaat.

4. Maak CSS-regels aan met de eigenschap ` font-family ` om het aangepaste lettertype toe te passen. 
5. Klik rechtsboven op ‘Bijwerken’ of‘Publiceren’ om je wijzigingen live te zetten. 

Een aangepast lettertype gebruiken in een e-mail in de e-maileditor met slepen en neerzetten

Aangepaste e-maillettertypen worden ondersteund in Apple Mail en gedeeltelijk ondersteund in Samsung Mail. Aangepaste lettertypen worden niet ondersteund in Gmail, Outlook of de meeste mobiele webclients. Om uw lezers een consistente ervaring te bieden, wordt aangeraden om in e-mails standaardweblettertypen te gebruiken.

Als je echter een aangepast lettertype wilt toevoegen aan een e-mail in de e-maileditor met slepen en neerzetten, kun je dat doen nadat je een aangepast lettertype hebt geüpload naar je merkpakket en een vervangend lettertype hebt ingesteld. 

1. Voeg een aangepast lettertype toe aan je merkkit en selecteer vervolgens het standaardlettertype dat het meest op je aangepaste lettertype lijkt. Om problemen met fallback-lettertypen te voorkomen:  
   • Gebruik vervangende lettertypen met een vergelijkbare x-hoogte en dikte als je eigen lettertype.
   • Bekijk een voorbeeld van marketingmails in verschillende e-mailprogramma’s om te zien welke lettertypen worden weergegeven.
   • Zorg ervoor dat alle belangrijke elementen naar behoren worden weergegeven met vervangende lettertypen.
2. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > E-mail. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > E-mail.
3. Klik op denaam vaneen marketingmail, of klik op‘E-mail aanmaken’ om een nieuwe e-mail aan te maken.
4. Om een aangepast lettertype te gebruiken voor het opmaken van tekstonderdelen, zoals alinea’s of koppen:
   • Klik in de e-maileditor op het pictogram voor sjabloonontwerpin de linkerzijbalk.
   • Om een lettertype in te stellen, klikt u in het gedeelte ‘Tekststijlen’ op hetvervolgkeuzemenu enselecteert u eenlettertype inhet gedeelte‘Aangepaste lettertypen ’.

5. Om een aangepast lettertype te gebruiken in een rich text-module: 
   • Selecteer in de e-maileditor tekst in een rich-text-module.
   • Klik in de rich text-editor op hetvervolgkeuzemenu voor lettertypen, beweeg de muisaanwijzer over‘Aangepaste lettertypen’, vervolgens over een aangepast lettertype en selecteer eenletterdikte.

6. Stel de inhoud van de e-mail op en bekijk vervolgens een voorbeeld van de e-mail in verschillende e-mailprogramma’s.
7. Rond de e-mail af en verstuur hem.

Een aangepast lettertype gebruiken in een zelfgeprogrammeerde e-mailsjabloon

Aangepaste lettertypen worden ondersteund in Apple Mail en gedeeltelijk ondersteund in Samsung Mail. Aangepaste lettertypen worden niet ondersteund in Gmail, Outlook of de meeste mobiele webclients. Om uw lezers een consistente ervaring te bieden, wordt aangeraden om in e-mails standaardweblettertypen te gebruiken.

Als je echter een aangepast lettertype wilt toevoegen aan een zelfgeprogrammeerd e-mailsjabloon, kun je dat doen zodra je het aangepaste lettertype hebt toegevoegd aan de bestandsfunctie.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik in de Finder op de naam van je zelfgecodeerde e-mailsjabloon.
3. Voor elke lettertypestijl:
   • Plak deze code in het gedeelte ` <head> ` van het sjabloon 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. • Vul hier de naam van het lettertype in .
   • Vervangyour_font_file.xxx? doordeURLuit de tool ‘Bestanden’. Herhaal dit voor elk bestandsformaat. 

4. Voeg in de code van de e-mailtekst het aangepaste lettertype toe via inline opmaak. 
5. Klik rechtsboven op ‘Bijwerken’ of‘Publiceren’ om je wijzigingen live te zetten. 

Een aangepast lettertype gebruiken in een CTA

Nadat je een aangepast lettertype aan je thema hebt toegevoegd, kun je dit gebruiken bij CTA’s.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > CTA's. Als Meer niet in je account verschijnt, navigeer dan direct 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 het gedeelte ‘Stijlen’ om het uit te vouwen.
6. Klik op het vervolgkeuzemenu ‘Primair lettertype ’ en selecteer uw aangepaste lettertype. 
7. Ga verder met het opstellen van je CTA. 

Een aangepast lettertype gebruiken in een CTA (verouderde methode)

Net als bij CTA’s kun je, nadat je een aangepast lettertypebestand hebt geüpload, dit gebruiken in oudere CTA’s.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > CTA's. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > CTA's.
2. Beweeg de muisaanwijzer over een CTA en klik vervolgens op Acties >Bewerken. 
3. Klik in het rechtervenster op‘Geavanceerde opties’. 
4. Plak deze code in het tekstvak:
   
   font-family: 'Your Font Name';
5. Vul hier denaam van het lettertype in.
6. Klik rechtsonder op‘Volgende’. Klik vervolgens op Opslaan.

Een aangepast lettertype gebruiken in een aangepaste module

Nadat je een aangepast lettertype aan de bestandsfunctie hebt toegevoegd, kun je het gebruiken in aangepaste blog- of paginamodules. Ontdek hoe je een aangepast lettertype toevoegt aan een zelfgeprogrammeerd e-mailsjabloon. 

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
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. • Vul hier de naam van het lettertype in .
   • Vervangyour_font_file.xxx? doordeURLuit de tool ‘Bestanden’. Herhaal dit voor elk bestandsformaat.
6. Maak CSS-regels aan met de eigenschap ` font-family ` om het aangepaste lettertype toe te passen. 
7. Klik rechtsboven op ‘Wijzigingen publiceren’om je wijzigingen live te zetten.