Använd typsnitt i HubSpot

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:

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: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
  • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
  • blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
  • Kunskapsbas: I ditt HubSpot-konto navigerar du till Innehåll > Kunskapsbas.
  • E-postadress: I ditt HubSpot-konto navigerar du till Marknadsföring > E-postmeddelande med marknadsföring.
• Klicka på namnet på ditt innehåll.
• 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 ett 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
• Använda ett Google Font i en specialkodad e-postmall
• Använd ett Google-teckensnitt i en CTA (legacy)
• Använd ett Google Font i ett formulär
• Använda ett Google Font i en anpassad modul

Använda ett Google-teckensnitt i en formatmall

• Kopiera typsnittets @import-kod från Google Fonts.
• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Ö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

• Kopiera typsnittets @import-kod från Google Fonts.
• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Ö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.
• I ditt HubSpot-konto navigerar du till Marknadsföring > CTA :er.
• 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

• I ditt HubSpot-konto navigerar du till Marknadsföring > 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.

• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.

• Öppna den anpassade modulen i sökaren till vänster. Läs mer om hur du skapar en anpassad modul.
• I inspektören till höger klickar du på rullgardinsmenyn Lägg till fält i avsnittet Fält och väljer Font. Läs mer om hur du arbetar med teckensnittsfält.

• 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: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
  • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
  • blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
• Klicka på namnet på det innehåll som använder den anpassade modulen.
• 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: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
  • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
  • blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
• Klicka på namnet på ditt innehåll.
• 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. Varje stil måste använda en separat teckensnittsfil.
• 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: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
  • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
  • blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
• Klicka på namnet på ditt innehåll.
• 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.

• I ditt HubSpot-konto navigerar du till Bibliotek > Filer.
• 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.

• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Ö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.

• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Ö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:

• I ditt HubSpot-konto navigerar du till Marknadsföring > 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:

• I ditt HubSpot-konto navigerar du till Marknadsföring > 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.

• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Ö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.