Lettertypes gebruiken in HubSpot

De beschikbare lettertypen voor inhoud in HubSpot zijn afhankelijk van het type inhoud en het type lettertype. Bepaalde standaardlettertypen zijn beschikbaar in alle content editors, terwijl weblettertypen (zoals Google Fonts) en aangepaste lettertypen extra beperkingen hebben, hieronder uiteengezet:

Let op: niet alle content types zijn beschikbaar in alle accounts. de content types die beschikbaar zijn voor de abonnementen in je HubSpot account kun je vinden in de Product en Services Catalogus.

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 uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: Navigeer in uw HubSpot-account naar Marketing > Landingspagina's.
  • Blog: Navigeer in uw HubSpot account naar Marketing > Website > Blog.
  • Kennisbank: Navigeer in uw HubSpot account naar Service > Kennisbank.
  • Email: Navigeer in uw HubSpot-account naar Marketing > E-mail.
• Ga met de muis over uw inhoud en klik op Bewerken.
• Klik in de inhoudseditor op een rijke tekstmodule en markeer vervolgens de tekst die u wilt bewerken.
• Klik in de werkbalk Rijke tekst op het keuzemenu Lettertype en selecteer een lettertype. De volgende lettertypen zijn beschikbaar in rijke tekstmodules:

  • Andale Mono*

  • Arial

  • Boek Antiqua*

  • Koerier Nieuw

  • Georgia

  • Helvetica

  • Impact*

  • Lato**
  • Merriweather**

• • Monaco*

• • Symbool*

  • Tahoma

  • Terminal*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Niet beschikbaar in de e-mail editor met slepen en neerzetten.

**Alleen beschikbaar als webfont in de drag and drop e-mail editor.

Gebruik webfonts

Webfonts zijn standaard beschikbaar in de inhoudseditor voor pagina's die gebruikmaken van startsjablonen en thema's, alsook voor kennisbankartikelen en aangepaste modules. Als u een ontwikkelaar bent, kunt u het font-veld ook gebruiken om webfonts toe te voegen aan thema's en aangepaste modules. Bij gebruik op deze manieren worden webfonts niet geladen van een service van derden, maar zal HubSpot ze direct serveren op het domein waarop de pagina wordt geladen.

Let op: webfonts kunnen niet worden geselecteerd in het keuzemenu met fonts van de rich text editor.

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

• Navigeer naar fonts.google.com.
• Voer in de zoekbalk een lettertypenaam in.
• Klik op de naam van het lettertype om een lijst met beschikbare stijlen voor import weer te geven.
• Klik naast elke stijl die u wilt importeren op + Selecteer deze stijl
• Selecteer in het rechterpaneel @import 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 <style> tag.
  • 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
• Gebruik een Google Font in een aangepast e-mail sjabloon
• Gebruik een Google-lettertype in een CTA
• Een Google-lettertype in een formulier gebruiken
• Een Google-lettertype gebruiken in een aangepaste module

Een Google-lettertype gebruiken in een stylesheet

• Kopieer de @import code van het lettertype van Google Fonts.
• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open in de Finder het stylesheet dat voor uw 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 Publiceren of Bijwerken om uw wijzigingen live te zetten.

Gebruik een Google Font in een aangepast e-mail sjabloon

• Kopieer de @import code van het lettertype van Google Fonts.
• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open in de finder de aangepaste gecodeerde e-mailsjabloon.
• Plak in de<head> sectie van het sjabloon de @import code tussen de <style>....</style> tags.
• Voeg in de code van de e-mail body het aangepaste lettertype toe in inline styling.
• Klik rechtsboven op Bijwerken of Publiceren om uw wijzigingen live te zetten.

Gebruik een Google-lettertype in een CTA

• Kopieer de code van Google voor het instellen van CSS-regels voor dat lettertype.
• Navigeer in uw HubSpot-account naar Marketing > Lead capture > CTA's.
• Ga met de muis over een CTA, klik op het vervolgkeuzemenu Acties en selecteer 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

• Navigeer in uw HubSpot account naar Marketing > Lead capture > 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 linker zijbalkmenu op de sectie Stijl .
• Klik in het gedeelte Tekst op het keuzemenu Lettertypefamilie en selecteer een Google-lettertype.
• Klik rechtsboven op Bijwerken of Publiceren om uw wijzigingen live te zetten.

Een Google-lettertype gebruiken in een aangepaste module

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

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.

• Open in de zoeker links de aangepaste module. Meer informatie over het maken van een aangepaste module.
• Klik in de inspecteur rechts op hetkeuzemenu Voeg veld toe in de sectie Velden en selecteer Lettertype. Meer informatie over het werken met lettertypevelden.

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

• Navigeer naar uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: Navigeer in uw HubSpot-account naar Marketing > Landingspagina's.
  • Blog: Navigeer in uw HubSpot account naar Marketing > Website > Blog.
• Ga met de muis over de inhoud van de aangepaste module en klik op Bewerken.
• Klik in de inhoudseditor op de aangepaste module.
• Klik in de zijbalkeditor op het keuzemenu Lettertypeveld en selecteer een Google-lettertype.

Gebruik aangepaste lettertypes

Als alternatief voor het gebruik van standaard webfonts of een fontbibliotheek zoalsGoogle Fonts, kun je fontbestanden hosten in de file tool, en er vervolgens naar verwijzen in je stylesheet.

Let op: aangepaste lettertypes zijn alleen beschikbaar in accounts met toegang tot de design manager en moeten worden toegepast met CSS.Als u een aangepast lettertype toevoegt, wordt het lettertype niet toegevoegd aan de styling van dropdownmenu's in de inhoudseditor.

Om een lettertype te gebruiken in content, upload je de bestanden van het lettertype naar de file tool. HubSpot raadt aan minimaal de .woff, .ttf, & .eot versies van het lettertype te uploaden om er zeker van te zijn dat je lettertype in allebrowsers wordt geladen. Je kunt de Expert modus van Font Squirrel's converter tool gebruiken om extra bestandsformaten te genereren.

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Bestanden.
• Klik op Bestanden uploaden.
• Selecteer op de harde schijf van uw computer de lettertypebestanden en klik 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. U hebt de URL nodig voor het lettertype in elk bestandsformaat.

Een aangepast lettertype gebruiken in een stylesheet

Als je eenmaal 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.

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open in de Finder het stylesheet dat voor uw inhoud is gebruikt.
• Voor elke letterstijl:
  • 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 de naam van het lettertype.
  • Vervanguw_font_bestand.xxx?door deURL van de bestandentool. Herhaal dit voor elk bestandsformaat.
• Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen.
• Klik rechtsboven op Bijwerken of Publiceren om uw wijzigingen live te zetten.

Een aangepast lettertype gebruiken in een aangepaste gecodeerde e-mailsjabloon

Aangepaste lettertypes worden in de meeste populaire e-mailclients niet ondersteund. Voor een consistente ervaring voor uw lezers is het gebruik van standaard webfonts in e-mails aanbevolen. Als u echter een aangepast lettertype wilt toevoegen aan een aangepaste gecodeerde e-mailsjabloon, kunt u dat doen nadat u het aangepaste lettertype hebt toegevoegd aan de bestandstool.

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open in de finder de aangepaste gecodeerde e-mailsjabloon.
• 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 uw lettertypenaam door de naam van het lettertype.
  • Vervanguw_font_bestand.xxx?door deURL van de bestandentool. Herhaal dit voor elk bestandsformaat.
• Voeg in de code van de e-mail body het aangepaste lettertype toe in inline styling.
• Klik rechtsboven op Bijwerken of Publiceren om uw wijzigingen live te zetten.

Gebruik een aangepast lettertype in een CTA

Als je eenmaal een aangepast lettertype hebt toegevoegd aan het bestandstool, kun je het gebruiken in CTA's:

• Navigeer in uw HubSpot-account naar Marketing > Lead capture > CTA's.
• Ga met de muis over een CTA, klik op het vervolgkeuzemenu Acties en selecteer Bewerken.
• Klik in het rechterpaneel op Geavanceerde opties.
• Plak deze code in het tekstvak:

font-family: 'Your Font Name';

• Vervang uw lettertypenaam door de naam van het lettertype.
• Klik rechtsonder op Volgende. Klik vervolgens op Opslaan.

Een aangepast lettertype gebruiken in een aangepaste module

Als u eenmaal een aangepast lettertype hebt toegevoegd aan de bestandstool, kunt u het gebruiken in aangepaste blog- of paginamodules. Leer hoe je een aangepast lettertype toevoegt aan een aangepaste gecodeerde e-mailsjabloon.

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open in de finder de aangepaste module.
• Plak in de module.css sectie 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 de naam van het lettertype.
• Vervanguw_font_bestand.xxx?door deURL van de bestandentool. Herhaal dit voor elk bestandsformaat.
• Maak CSS-regels met de eigenschap font-family om het aangepaste lettertype toe te passen.

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