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 Marketing > Website > Website pagina's.
  • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.
  • Blog: Ga in je HubSpot account naar Marketing > Website > Blog.
  • Kennisbank: Ga in je HubSpot account naar Service > Kennisbank.
  • E-mail: Ga in je HubSpot account naar Marketing > E-mail.
• Beweeg de muis over je inhoud en klik op Bewerken.
• 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, maar ook 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 service van derden; 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 Marketing > Bestanden en templates > Ontwerptools.
• 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 Marketing > Bestanden en templates > Ontwerptools.
• 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 > Lead registratie > CTA knoppen.
• 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 > Leadregistratie > 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 Marketing > Bestanden en templates > Ontwerptools.

• 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 Marketing > Website > Website pagina's.
  • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.
  • Blog: Ga in je HubSpot account naar Marketing > Website > Blog.
• Ga met de muis over de inhoud met de aangepaste module en klik op Bewerken.
• 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 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 content, upload je de bestanden van het lettertype naar de bestanden tool. HubSpot raadt aan om minimaal de .woff, .ttf, & .eot versies van het lettertype te uploaden om er zeker van te zijn 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 Marketing > Bestanden en templates > 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 Marketing > Bestanden en templates > Ontwerptools.
• 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 Marketing > Bestanden en templates > Ontwerptools.
• 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.

Een aangepast lettertype gebruiken in een CTA (legacy)

Zodra je een aangepast lettertype hebt toegevoegd aan de bestandstool, kun je het gebruiken in oudere CTA's:

• Ga in je HubSpot account naar Marketing > Lead registratie > CTA knoppen.
• 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 Marketing > Bestanden en templates > Ontwerptools.
• 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.