Lettertypen gebruiken in HubSpot

De lettertypes die beschikbaar zijn voor content in HubSpot zijn afhankelijk van het type content en het type lettertype. Bepaalde standaard lettertypen zijn beschikbaar in alle content editors, terwijl Google Fonts en aangepaste lettertypen aanvullende beperkingen hebben, die hieronder worden geschetst:

Let op: niet alle contenttypes zijn beschikbaar in alle accounts. De contenttypes die beschikbaar zijn voor de abonnementen in uw HubSpot account kunt u vinden in de Product en Services Catalogus.

Standaardlettertypen gebruiken

Standaardlettertypes kunnen in alle soorten inhoud worden gebruikt en zijn zo ontworpen dat ze op de meeste platforms en apparaten kunnen worden geladen.

• Navigeer naar je inhoud:

  • Website pagina's: { local.navWebsitePages }}
  • Landingspagina's: { local.navLandingPages }}
  • 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 uw muis over uw inhoud en klik opBewerken.
• Klik in de inhoudseditor op eenrijke tekstmodule en markeer vervolgens de tekst die u wilt bewerken.
• Klik in de rich text werkbalk op hetFontdropdown menu en selecteer een font. De volgende lettertypes zijn beschikbaar in rijke tekstmodules:

  • Andale Mono*

  • Arial

  • Boek Antiqua*

  • Koerier Nieuw

  • Georgia

  • Helvetica

  • Impact*

  • Lato**
  • Merriweather**

• • Monaco.

• • Symbol*

  • Tahoma

  • Terminal*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Niet beschikbaar in de "drag and drop" email editor.

**Alleen beschikbaar als weblettertype in de e-maileditor met slepen en neerzetten.

Gebruik Google-lettertypes

Google Fonts zijn beschikbaar in de content editor voor pagina's die gebruik maken van starter templates en thema's, maar ook voor kennisbank artikelen en aangepaste modules. Als u een Google-lettertype op andere pagina's wilt gebruiken, moet u de importcode van het lettertype kopiëren, deze in het stylesheet van de pagina plakken en vervolgens het lettertype toepassen met CSS-regels.

Lees meer over hoe ontwikkelaars lettertypevelden kunnen gebruiken om Google Fonts toe te voegen aan thema's en aangepaste modules in HubSpot's ontwikkelaarsdocumentatie.

Let op: Google Fonts kunnen niet worden geselecteerd in het lettertype dropdown menu van de rich text editor.

• Navigeer naar fonts.google.com.
• Voer in de zoekbalk eenlettertypenaam in.
• Klik op de naam van het lettertype om een lijst te zien van stijlen die beschikbaar zijn om te importeren.
• Naast elke stijl die u wilt importeren, klikt u op + Selecteer deze stijl
• In het rechterpaneel, selecteer@importin de sectieGebruik op het web.
• Kopieer de code van het lettertype:
  • Kopieer in de sectie Use on the web de @import code zonder de <style> tag.
  • Kopieer in het veldCSS-regels om families te specificeren decode voor het instellen van CSS-regels.

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

• Gebruik een Google Font in een stylesheet
• Gebruik een Google Font in een aangepaste gecodeerde e-mail template
• Gebruik een Google-lettertype in een CTA
• Gebruik een Google Font in een formulier
• Gebruik een Google Font in een aangepaste module

Gebruik een Google Font 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 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 opPubliceren ofBijwerkenom uw wijzigingen live te zetten.

Gebruik een Google Font in een aangepaste gecodeerde e-mail template

• Kopieer de @import code van het lettertype van Google Fonts.
• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• Open in de zoeker de aangepaste gecodeerde email sjabloon.
• In de<head> sectie van het sjabloon, plak de @import code tussen de <style>....</style> tags.
• In de code van de e-mail body, voeg het aangepaste lettertype toe in inline styling.
• Klik rechtsboven op BijwerkenofPubliceren om uw wijzigingen live te zetten.

Gebruik een Google-lettertype in een CTA

• Kopieer Google's code 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 dan op het Actions dropdown menu en selecteerEdit.
• Klik in het rechterpaneel opGeavanceerde opties.
• Plak in het tekstvak Google's code voor het instellen van CSS regels voor dat lettertype.
• Klik rechtsonder opVolgende. Klik dan op Opslaan.

Gebruik een Google Font in een formulier

• Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
• Ga met de muis over de naam van het formulier en klik op Acties > Formulier bewerken of Maak een nieuw formulier.
  
• Klik in de formuliereditor op het tabblad Stijl & voorbeeld.
• Klik in het menu aan de linkerkant op de sectieStijl.
• Klik in deTekstsectie op hetLettertype familie dropdown menu en selecteer eenGoogle Lettertype.
• Klik rechtsboven opBijwerkenofPubliceren om uw wijzigingen live te zetten.

Gebruik een Google Font in een aangepaste module

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

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

• 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 deAdd fielddropdown in deFieldssectie en selecteerFont. Meer informatie over het werken met lettertypevelden.

• Klik rechtsboven op Wijzigingen publicerenom uw wijzigingen live te zetten.

• Navigeer naar je inhoud:

  • Website pagina's: { local.navWebsitePages }}
  • Landingspagina's: { local.navLandingPages }}
  • Blog: Navigeer in uw HubSpot account naar Marketing > Website > Blog.
• Ga met de muis over de inhoud van de aangepaste module en klik opBewerken.
• Klik in de inhoudseditor op deaangepaste module.
• Klik in de zijbalk editor op hetFont velddropdown menu en selecteer eenGoogle Font.

Gebruik aangepaste lettertypen

Als alternatief voor het gebruik van standaard web fonts of een font bibliotheek zoalsGoogle Fonts, kun je font bestanden hosten in de bestanden tool, en er dan 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 lettertypeniet toegevoegd aan de vervolgkeuzemenu's in de inhoudseditor.

Om een lettertype in content te gebruiken, uploadt u de bestanden van het lettertype naar de bestandentool. HubSpot raadt aan om een minimum van de.woff, .ttf, & .eot versies van het lettertype te uploaden om er zeker van te zijn dat uw lettertype in allebrowsers wordt geladen. U kunt gebruik maken van de Expert mode opFont Squirrel's converter toolom extra bestandsformaten te genereren.

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Bestanden.
• Klik opBestanden uploaden.
• Selecteer op de harde schijf van uw computer delettertypebestanden en klik vervolgens opOpenen.
• Klik op de naam van een geüpload lettertypebestand.
• In het rechterpaneel, klik opURL kopiëren om de URL te kopiëren waar het bestand gehost wordt. U hebt de URL voor het lettertype in elk bestandsformaat nodig.

Gebruik een aangepast lettertype in een stylesheet

Als je eenmaal een aangepast lettertype hebt toegevoegd aan de bestanden tool, kun je er naar verwijzen in een stylesheet. Voor elke lettertypestijl (cursief, vet, etc.) is een aparte @font-face regel nodig. Leer meer 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 je inhoud is gebruikt.
• Voor elke lettertype stijl:
  • Bovenaan het stylesheet plak je de volgende code:

@font-face { font-family: 'Uw lettertype naam'; src: url('uw_font_file.eot?') format('eot'), url('uw_font_file.woff') format('woff'), url('uw_font_file.ttf') format('truetype');}

• • Vervang de lettertypenaam door denaam van het lettertype.
  • Vervanguw_font_file.xxx?door de URLuit de bestanden tool. Herhaal dit voor elk bestandsformaat.
• Maak CSS regels met de font-family eigenschap om het aangepaste lettertype toe te passen.
• Klik rechtsboven op BijwerkenofPubliceren om uw wijzigingen live te zetten.

Gebruik een aangepast lettertype in een aangepaste gecodeerde e-mailsjabloon

Aangepaste lettertypen worden niet ondersteund in de meeste populaire e-mailclients. Om een consistente ervaring voor uw lezers te garanderen, standaard weblettertypen gebruiken in e-mails wordt aanbevolen. Als u echter een aangepast lettertype wilt toevoegen aan een aangepaste gecodeerde e-mailsjabloon, kunt u dit 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 zoeker de aangepaste gecodeerde email sjabloon.
• Voor elke lettertype stijl:
  • In de <head> sectie van het sjabloon, plak deze code tussen de <style>....</style> tags:

@font-face { font-family: 'Uw lettertype naam'; src: url('uw_font_file.eot?') format('eot'), url('uw_font_file.woff') format('woff'), url('uw_font_file.ttf') format('truetype');}

• • Vervang de lettertypenaam door denaam van het lettertype.
  • Vervanguw_font_file.xxx?door de URLuit de bestanden tool. Herhaal dit voor elk bestandsformaat.
• In de code van de e-mail body, voeg het aangepaste lettertype toe in inline styling.
• Klik rechtsboven op BijwerkenofPubliceren om uw wijzigingen live te zetten.

Gebruik een aangepast lettertype in een CTA

Zodra u een aangepast lettertype hebt toegevoegd aan de bestandstool, kunt u het gebruiken in CTA's:

• Navigeer in uw HubSpot-account naar Marketing > Lead capture > CTA's.
• Ga met de muis over een CTA, klik dan op het Actions dropdown menu en selecteerEdit.
• Klik in het rechterpaneel opGeavanceerde opties.
• In het tekstvak, plak deze code:

font-family: "Uw lettertype naam";

• Vervangde lettertypenaamdoor denaam van het lettertype.
• Klik rechtsonder opVolgende. Klik dan op Opslaan.

Gebruik een aangepast lettertype in een aangepaste module

Zodra u een aangepast lettertype hebt toegevoegd aan de bestandentool, kunt u het gebruiken in aangepaste modules:

• Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
• In de Finder, open de aangepaste module.
• In de module.css sectie, plak de volgende code:

@font-face { font-family: 'Uw lettertype naam'; src: url('uw_font_file.eot?') format('eot'), url('uw_font_file.woff') format('woff'), url('uw_font_file.ttf') format('truetype');}

• Vervang de lettertypenaam door denaam van het lettertype.
• Vervanguw_font_file.xxx?door de URLuit de bestanden tool. Herhaal dit voor elk bestandsformaat.
• Maak CSS regels met de font-family eigenschap om het aangepaste lettertype toe te passen.

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