HubSpot Kunskapsbas

Använd typsnitt i HubSpot

Skriven av HubSpot Support | Nov 2, 2021 2:10:29 PM

De teckensnitt som är tillgängliga för innehåll i HubSpot beror på typen av innehåll och typen av teckensnitt. Vissa standardteckensnitt är tillgängliga i alla innehållsredigerare, medan webbteckensnitt (t.ex. Google Fonts) och anpassade teckensnitt har ytterligare begränsningar, som beskrivs nedan:

Typ av innehåll Typ av teckensnitt
Standardteckensnitt Webbteckensnitt

Anpassade teckensnitt

Sida - temamallar Tillgänglig i temainställningar och via stilmall
Sida - kodad mall Tillgänglig via stylesheet eller anpassad modul Tillgänglig via stilmall
Blogg Tillgänglig via stylesheet eller anpassad modul
E-post Vissa standardteckensnitt är inte tillgängliga i e-postredigeraren med dra-och-släpp-funktion Endast tillgängligt för specialkodade e-postmallar; stöds inte i de flesta e-postklienter Endast tillgängligt för specialkodade e-postmallar; stöds inte i de flesta e-postklienter
Kunskapsbas Tillgänglig på fliken Design i mallredigeraren Ej tillgänglig
Anpassad modul Tillgänglig för anpassade moduler som inte används i e-postmeddelanden Tillgänglig för anpassade moduler som inte används i e-postmeddelanden
CTA (äldre)
CTA

Observera: alla innehållstyper är inte tillgängliga i alla konton. de innehållstyper som är tillgängliga för prenumerationerna i ditt HubSpot-konto finns i produkt- och tjänstekatalogen.

Använd standardteckensnitt

Standardteckensnitt kan användas i alla typer av innehåll och är utformade för att laddas på de flesta plattformar och enheter.

  • Navigera till ditt innehåll:

    • Webbplatsens sidor:
    • Landningssidor:
    • blogg:
    • Kunskapsbas:
    • E-postadress:
  • Håll muspekaren över ditt innehåll och klicka på Redigera.
  • Klicka på en rikstextmodul i innehållsredigeraren och markera sedan den text som du vill redigera.
  • I verktygsfältet för rik text klickar du på rullgardinsmenyn Font och väljer ett typsnitt. Följande teckensnitt finns tillgängliga i rikstextmoduler:
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbol*

    • Tahoma

    • Terminal *.

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Inte tillgängligt i e-postredigeraren med dra-och-släpp-funktion.

**Bara tillgängligt som webbtypsnitt i e-postredigeraren med dra-och-släpp-funktion.

Använd webbteckensnitt

Webbtypsnitt är tillgängliga som standard i innehållsredigeraren för sidor som använder startmallar och teman, samt för artiklar i kunskapsdatabasen och anpassade moduler.

Om du är utvecklare kan du också använda font-fältet för att lägga till webbtypsnitt i teman och anpassade moduler. När webbtypsnitt används på dessa sätt laddas de inte från en tredjepartstjänst, utan HubSpot laddar dem direkt på innehållets domän.

Observera: webbteckensnitt kan inte väljas i rullgardinsmenyn för teckensnitt i redigeraren för rik text.

Du kan också använda tredjepartstjänster som Google Fonts genom att kopiera typsnittets importkod, klistra in den i innehållets stilmall och sedan tillämpa typsnittet via CSS:

  • Navigera till fonts.google.com.
  • Ange ett namn på teckensnittet i sökfältet.
  • Klicka på teckensnittets namn för att visa en lista över stilar som är tillgängliga för import.
  • Klicka på + Välj den här stilen bredvid varje stil som du vill importera
  • I den högra panelen väljer du @import i avsnittet Använd på webben .
  • Kopiera typsnittets kod:
    • I avsnittet Använd på webben kopierar du @import-koden utan <style>-taggen.
    • I fältet CSS-regler för att ange familjer kopierar du koden för att ställa in CSS-regler.

När du har koden från Google Fonts kan du lägga till teckensnittet i ditt HubSpot-innehåll:

Använda ett Google-teckensnitt i en formatmall

  • Kopiera typsnittets @import-kod från Google Fonts.
  • Öppna den stilmall som används för ditt innehåll i sökaren.
  • Klistra in @import-koden på rad 1 i stilmallen.
  • Lägg till koden för att ställa in CSS-regler till lämpliga väljare i stilmallen.
  • Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.

Använda ett Google Font i en specialkodad e-postmall

Även om Google Fonts stöds av Apple Mail och några andra e-postklienter, är det breda stödet begränsat och de flesta populära e-postklienter stöder endast standardteckensnitt för webb. Läs mer om hur du väljer de standardteckensnitt som används i den klassiska e-postredigeraren.
Anpassade kodade e-postmallar är endast tillgängliga i konton med en Marketing Hub Professional eller Enterprise-prenumeration.
Så här lägger du till en Google Font i en e-postmall med anpassad kod:
  • Kopiera typsnittets @import-kod från Google Fonts.
  • Öppna den specialkodade e-postmallen i sökaren.
  • I avsnittet<head> i mallen klistrar du in @import-koden mellan <style>....</style> -taggarna.
  • Lägg till det anpassade teckensnittet i inline-styling i koden för e-postens brödtext.
  • Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.

Använd ett Google-teckensnitt i en CTA (legacy)

  • Kopiera Googles kod för att ställa in CSS-regler för det teckensnittet.
  • Håll muspekaren över en CTA och klicka sedan på Åtgärder > Redigera.
  • Klicka på Avancerade alternativ i den högra panelen.
  • I textrutan klistrar du in Googles kod för att ställa in CSS-regler för det teckensnittet.
  • Klicka på Nästa längst ned till höger. Klicka sedan på Spara.

Använd ett Google Font i ett formulär

  • Håll muspekaren över formulärnamnet och klicka på Åtgärder > Redigera formulär eller Skapa ett nytt formulär.
  • I formulärredigeraren klickar du på fliken Stil och förhandsgranskning.
  • Klicka på avsnittet Stil i menyn i vänster sidofält.
  • I avsnittet Text klickar du på rullgardinsmenyn Fontfamilj och väljer en Google Font.
  • Klicka på Uppdatera eller Publicera längst upp till höger för att ta dina ändringar i bruk.

Använda ett Google Font i en anpassad modul

Observera: Google Fonts är inte tillgängliga för anpassade moduler som används i e-postmallar.


  • Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.
  • Navigera till ditt innehåll:

    • Webbplatsens sidor:
    • Landningssidor:
    • blogg:
  • Håll muspekaren över innehållet med den anpassade modulen och klicka på Redigera.
  • Klicka på den anpassade modulen i innehållsredigeraren.
  • I sidofältsredigeraren klickar du på rullgardinsmenyn Font field och väljer ett Google Font.

Använd egna teckensnitt

Som ett alternativ till att använda standardwebbtypsnitt eller ett typsnittsbibliotek som Google Fonts kan du ladda upp typsnittsfiler och sedan använda dem i teman eller referera till dem i stilmallar.

Använd egna teckensnitt i teman

I temaredigeraren kan du ladda upp ett anpassat teckensnitt och sedan använda det teckensnittet på sidor och i inlägg. Teckensnittsfiler stöds i följande format: TTF, OTF, WOFF.

Ladda upp egna teckensnitt

  • Navigera till ditt innehåll:

    • Webbplatsens sidor:
    • Landningssidor:
    • blogg:
  • Håll muspekaren över ditt innehåll och klicka på Redigera.
  • Klicka på menyn Redigera i innehållsredigeraren och välj Tema: [Namn på tema].
  • I menyn i vänster sidofält klickar du på en rullgardinsmeny för teckensnitt och väljer Ladda upp ett anpassat teckensnitt.
  • I den högra panelen anger du en etikett för teckensnittet i fältet Font Name .
  • Klicka på Choose font files och välj en eller flera teckensnittsfiler och klicka sedan på Next.

  • Klicka på rullgardinsmenyn Font Style 1 och välj den stil som din teckensnittsfil använder. Du kan ställa in samma teckensnittsfil till flera stilar.
  • Om du vill lägga till ytterligare typsnitt klickar du på + Lägg till ett nytt typsnitt och lägger sedan till dina typsnitt. Varje uppladdad teckensnittsfil måste ha minst en associerad stil.
  • När du har lagt till alla tillämpliga teckensnitt klickar du på Klar.

Redigera anpassade teckensnitt

När du har laddat upp ett anpassat teckensnitt i temaredigeraren kan du ladda upp ytterligare teckensnitt, anpassa befintliga teckensnitt med ytterligare teckensnittsstilar eller ta bort teckensnitt.

  • Navigera till ditt innehåll:

    • Webbplatsens sidor:
    • Landningssidor:
    • blogg:
  • Håll muspekaren över ditt innehåll och klicka på Redigera.
  • Klicka på menyn Redigera i innehållsredigeraren och välj Tema: [Namn på tema].
  • I menyn till vänster klickar du på för att expandera avsnittet Fonts .
  • Klicka på ett teckensnitt i rullgardinsmenyn och väljHantera anpassade teckensnitt.
  • Om du vill lägga till ett nytt teckensnitt klickar du på Lägg till ett anpassat teckensnitt i dialogrutan.
  • Så här redigerar du ett teckensnitt:
    • Klicka på rullgardinsmenyn Åtgärder bredvid teckensnittet i dialogrutan och välj Redigera.
    • Om du vill ändra namnet på teckensnittet klickar du på Redigera bredvid teckensnittsnamnet och anger sedan ett nytt namn på teckensnittet.
    • Om du vill lägga till ytterligare teckensnittsstilar klickar du på Lägg till en annan teckensnittsstil och sedan på rullgardinsmenyn Teckensnittsstil och väljer en stil. Klicka på Ladda upp och ladda sedan upp en teckensnittsfil.
    • Om du vill ta bort ett teckensnitt klickar du på ikonen deletededel  ta bort bredvid teckensnittet. Du kan inte ta bort en typsnittsstil om det inte finns några andra typsnittsstilar listade.
    • Klicka på Spara.
  • Om du vill ta bort ett teckensnitt klickar du på rullgardinsmenyn Åtgärder i dialogrutan och väljer Ta bort.

Observera: Om du tar bort ett teckensnitt tas det bort från alla rullgardinsmenyer, men teckensnittsfilerna finns kvar i filverktyget tills de tas bort där.


  • När du är klar med att redigera dina teckensnitt klickar du på Klar.

Använda egna teckensnitt i formatmallar

Som ett alternativ till att använda standardwebbtypsnitt eller ett typsnittsbibliotek som Google Fonts kan du hosta typsnittsfiler i filverktyget och sedan referera till dem i din stilmall.

Observera: anpassade teckensnitt är endast tillgängliga på konton med tillgång till designhanteraren och måste tillämpas med CSS. Om du lägger till ett anpassat typsnitt läggs inte typsnittet till i rullgardinsmenyerna för styling i innehållsredigeraren.

Om du vill använda ett teckensnitt i innehåll laddar du upp teckensnittets filer till filverktyget. Vi rekommenderar att du laddar upp minst .woff-, .ttf- och .eot-versioner av teckensnittet för att säkerställa att ditt teckensnitt laddas i alla webbläsare. Du kan använda expertläget i Font Squirrels konverteringsverktyg för att generera ytterligare filformat.

  • Klicka på Ladda upp filer.
  • Markera teckensnittsfilerna på datorns hårddisk och klicka sedan på Öppna.
  • Klicka på namnet på en uppladdad teckensnittsfil.
  • I den högra panelen klickar du på Kopiera URL för att kopiera URL:en där filen är hostad. Du behöver URL:en för teckensnittet i varje filformat.

Använda ett eget typsnitt i en formatmall

När du har lagt till ett anpassat teckensnitt i filverktyget kan du referera till det i en stilmall. Varje typsnittsstil (kursiv, fet etc.) kräver en separat @font-face-regel. Läs mer om hur du arbetar med stilmallar i HubSpot.

  • Öppna den stilmall som används för ditt innehåll i sökaren.
  • För varje teckensnittsstil:
    • Överst i stilmallen klistrar du in följande kod:
@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');}
    • Ersätt Your Font Name med namnet på teckensnittet.
    • Ersätt your_font_file.xxx? med URL:en från filverktyget. Upprepa för varje filformat.
  • Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet.
  • Klicka på Uppdatera eller Publicera längst upp till höger för att ta dina ändringar i bruk.

Använda ett anpassat teckensnitt i en e-postmall med anpassad kod

Anpassade teckensnitt stöds inte i de flesta populära e-postklienter. För att säkerställa en konsekvent upplevelse för dina läsare rekommenderas att du använder standardwebbtypsnitt i e-postmeddelanden. Om du vill lägga till ett anpassat teckensnitt i en e-postmall med anpassad kod kan du dock göra det när du har lagt till det anpassade teckensnittet i filverktyget.

  • Öppna den specialkodade e-postmallen i sökaren.
  • För varje typsnitt:
    • I avsnittet <head> i mallen klistrar du in den här koden mellan taggarna <style>....</style>:
@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');}
    • Ersätt Your Font Name med namnet på teckensnittet.
    • Ersätt your_font_file.xxx? med URL:en från filverktyget. Upprepa för varje filformat.
  • Lägg till det anpassade teckensnittet i inline-styling i koden för e-postens brödtext.
  • Klicka på Uppdatera eller Publicera längst upp till höger för att ta dina ändringar i bruk.

Använd ett anpassat teckensnitt i en CTA

När du har lagt till ett anpassat teckensnitt i ditt tema kan du använda det med CTA:er:

  • Klicka på rullgardinsmenyn längst upp till vänster och välj CTA
  • Håll muspekaren över en CTA och klicka sedan på Åtgärder > Redigera.
  • Klicka på fliken Design i den vänstra panelen i CTA-redigeraren.
  • Klicka på avsnittet Styles för att expandera.
  • Klicka på rullgardinsmenyn Primary Font och välj ditt anpassade typsnitt.
  • Fortsätt att skapa din CTA.

Använd ett anpassat teckensnitt i en CTA (äldre)

På samma sätt som med CTA:er kan du efter att ha laddat upp en anpassad formulärfil använda den med äldre CTA:er:

  • Håll muspekaren över en CTA och klicka sedan på Åtgärder > Redigera.
  • Klicka på Avancerade alternativ i den högra panelen.
  • Klistra in den här koden i textrutan:

font-family: 'Your Font Name';

  • Ersätt Your Font Name med namnet på teckensnittet.
  • Klicka på Nästa längst ned till höger. Klicka sedan på Spara.

Använda ett anpassat teckensnitt i en anpassad modul

När du har lagt till ett anpassat teckensnitt i filverktyget kan du använda det i anpassade blogg- eller sidmoduler. Läs om hur du lägger till ett anpassat teckensnitt i en e-postmall med anpassad kod.

  • Öppna den anpassade modulen i sökaren.
  • I avsnittet module.css klistrar du in följande kod:
@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');}
  • Ersätt Your Font Name med namnet på teckensnittet.
  • Ersätt your_font_file.xxx? med URL:en från filverktyget. Upprepa för varje filformat.
  • Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet.
  • Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.