Landing Pages

Google-lettertypen toevoegen aan pagina's en CTA's

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

U kunt Google Font link tags toevoegen aan een of alle pagina's in uw instellingen, of in het header HTML veld. Als u comfortabel bent met het bewerken van CSS, kunt u de @import code toevoegen aan de bovenkant van een specifiek CSS-bestand.

Let op: Als u inhoud maakt met behulp van een thema, kunt u direct binnen uw thema-instellingen een willekeurig Google-lettertype kiezen. Alle Google-lettertypen worden ook ondersteund in startsjablonen op het tabblad Ontwerp.

Kopieer uw Google Font's Script

Kopieer eerst het script voor het door u gewenste lettertype uit Google Fonts.

  • Navigeer naar fonts.google.com.
  • Zoek in de zoekbalk naar de gewenste lettertypenaam.
  • Klik op de naam van het lettertype om een volledige lijst met beschikbare stijlen te bekijken die u kunt importeren.
  • Klik op + Selecteer deze stijl naast elke stijl die u wilt importeren uit dit lettertype.
  • Selecteer in het rechterpaneel het tabblad Embed en selecteer vervolgens @import.
  • Kopieer het @import script van Google, zonder de <style> tag. U voegt dit script toe aan de bovenkant van uw stylesheet in uw HubSpot account.
  • Vervolgens past u deze lettertypes toe op specifieke CSS-selectoren op uw HubSpot stylesheet met behulp van de CSS-regels om families uit Google Fonts te specificeren.

import-google-fonts-to-stylesheet

Voeg Google Font toe aan uw HubSpot pagina's

  • Pas het Google-lettertype toe op elke gewenste CSS-selector, zoals in het onderstaande voorbeeld.

h1 {
font-familie: 'Comic Neue', cursief;
}

Voeg uw Google-lettertype toe aan een CTA

U kunt een Google-lettertype toevoegen aan een aangepaste CTA in uw account. Deze optie is niet beschikbaar voor een image CTA.

  • Kopieer de Specify in CSS-code van Google Fonts.
  • Navigeer in uw HubSpot-account naar Marketing > Lead capture > CTA's.
  • Beweeg met de muis over de CTA die u wilt bewerken, klik vervolgens op het vervolgkeuzemenu Acties en selecteer Bewerken.
  • Onderaan de CTA-editor in het rechterpaneel klikt u op Geavanceerde opties.
  • In het aangepaste CSS-tekstveld plak je de code uit CSS-regels om families uit Google-lettertypen op te geven. U ziet het Google-lettertype toegepast op uw CTA zodra u deze CSS invoert.

  • Klik op Volgende in de rechterbenedenhoek om de details van uw CTA af te ronden. Klik vervolgens op Save om uw wijzigingen toe te passen.