Lettertypen gebruiken in HubSpot

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:

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 Inhoud > Websitepagina's.
  • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
  • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
  • Kennisbank: Ga in je HubSpot-account naar Inhoud > Kennisdatabase.
  • E-mail: Ga in je HubSpot-account naar Marketing > Marketing-e-mail.
• Klik op de naam van je inhoud.
• 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, evenals 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 externe service; 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.

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

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

Een Google-lettertype gebruiken in een stylesheet

• Kopieer de @import code van het lettertype van Google Fonts.
• Ga in je HubSpot-account naar Inhoud > Design Manager.
• 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.

Een Google Font gebruiken in een aangepaste e-mailsjabloon

• Kopieer de @import code van het lettertype van Google Fonts.
• Ga in je HubSpot-account naar Inhoud > Design Manager.
• 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 > CTA's.
• 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 > 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 Inhoud > Design Manager.

• 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 het keuzemenu Voeg veld toe in de sectie Velden en selecteer Font. Meer informatie over het werken met lettertypevelden.

• Klik rechtsboven op Wijzigingen publiceren om je wijzigingen live te zetten.

• Navigeer naar je inhoud:

  • Website Pagina'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.
• Klik op de naam van de inhoud met de aangepaste module.
• 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 Inhoud > Websitepagina's.
  • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
  • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
• Klik op de naam van je inhoud.
• 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.

• Klik op het vervolgkeuzemenu Font Style 1 en selecteer de stijl die je lettertypebestand gebruikt. Elke stijl moet een apart lettertypebestand gebruiken.
• 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 Inhoud > Websitepagina's.
  • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
  • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
• Klik op de naam van je inhoud.
• 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 Bibliotheek > 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 Inhoud > Design Manager.
• 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.

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 Inhoud > Design Manager.
• 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.

Gebruik een aangepast lettertype in een CTA

Nadat je een aangepast lettertype hebt toegevoegd aan je thema, kun je dit gebruiken met CTA's:

• Ga in je HubSpot-account naar Marketing > CTA's.
• Klik linksboven op het vervolgkeuzemenu en selecteer CTA's
• Ga met de muis over een CTA en klik op Acties > Bewerken.
• Klik in het linkerpaneel van de CTA-editor op de tab Ontwerp.
• Klik op het gedeelte Stijlen om uit te breiden.
• Klik op het vervolgkeuzemenu Primair lettertype en selecteer je aangepaste lettertype.
• Ga verder met het maken van je CTA.

Een aangepast lettertype gebruiken in een CTA (legacy)

Net als bij CTA's kun je nadat je een aangepast formulierbestand hebt geüpload, dit gebruiken met oude CTA's:

• Ga in je HubSpot-account naar Marketing > CTA's.
• 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.

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 Inhoud > Design Manager.
• 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.