Använd teckensnitt i HubSpot

Vilka 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 läsas på de flesta plattformar och enheter.

• Navigera till ditt innehåll:

  • Sidor på webbplatsen: 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-post: I ditt HubSpot-konto navigerar du till Marknadsföring > E-postmeddelande med marknadsföring.
• Håll muspekaren över innehållet och klicka på Redigera.
• Klicka på en rich text-modul i innehållsredigeraren och markera sedan den text du vill redigera.
• I verktygsfältet för rik text klickar du på rullgardinsmenyn Teckensnitt och väljer ett teckensnitt. Följande teckensnitt är tillgängliga i moduler för rik text:

  • Andale Mono*

  • Arial

  • Bok Antiqua*

  • Courier Ny

  • Georgia

  • Helvetica

  • Impact

  • Lato
  • Merriweather

• • Monaco

• • Symbol

  • Tahoma

  • Anslutning*

  • Times New Roman

  • Trebuchet MS

  • Verdana

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

**Finns endast som webbteckensnitt i dra-och-släpp-redigeraren för e-post.

Använd webbteckensnitt

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

Om du är utvecklare kan du också använda teckensnittsfältet för att lägga till webbteckensnitt i teman och anpassade moduler. När de används på dessa sätt laddas inte webbteckensnitt från en tredjepartstjänst; HubSpot laddar dem istället 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 teckensnittets importkod, klistra in den i innehållets stilmall och sedan tillämpa teckensnittet via CSS:

• Navigera till fonts.google.com.
• Ange ett namn på teckensnittet i sökfältet.
• Klicka på teckensnittsnamnet för att visa en lista över tillgängliga stilar att importera.
• Bredvid varje stil du vill importera, klicka på + Välj denna stil
• I den högra panelen väljer du @import i avsnittet Använd på webben .
• Kopiera teckensnittets 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 ange CSS-regler.

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

• Använda ett Google-teckensnitt i en formatmall
• Använd ett Google-teckensnitt i en anpassad e-postmall
• Använd ett Google-teckensnitt i en CTA (arv)
• Använd ett Google-teckensnitt i ett formulär
• Använd ett Google-teckensnitt i en anpassad modul

Använda ett Google-teckensnitt i en formatmall

• Kopiera teckensnittets @import-kod från Google Fonts.
• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• I sökaren öppnar du den formatmall som används för ditt innehåll.
• Klistra in @import-koden på rad 1 i formatmallen.
• Lägg till koden för att ange 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 live.

Använd ett Google-teckensnitt i en anpassad e-postmall

• Kopiera teckensnittets @import-kod från Google Fonts.
• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Öppna den anpassade kodade e-postmallen i sökaren.
• I avsnittet<head> i mallen klistrar du in @import-koden mellan <style>....</style> -taggarna.
• I koden för e-posttexten lägger du till det anpassade teckensnittet i inline styling.
• Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar live.

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

• Kopiera Googles kod för att ange CSS-regler för 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-teckensnitt 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 & förhandsgranskning.
• I menyn till vänster klickar du på avsnittet Stil .
• I avsnittet Text klickar du på rullgardinsmenyn Font family och väljer ett Google Font.
• Klicka på Uppdatera eller Publicera längst upp till höger för att aktivera ändringarna.

Använd ett Google-teckensnitt 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 live.

• Navigera till ditt innehåll:

  • Sidor på webbplatsen: 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.
• Håll muspekaren över innehållet med den anpassade modulen och klicka på Redigera.
• Klicka på den anpassade modulen i innehållsredigeraren.
• Klicka på rullgardinsmenyn Font field i sidebar-redigeraren och välj ett Google Font.

Använd anpassade typsnitt

Som ett alternativ till att använda standardwebbteckensnitt eller använda ett teckensnittsbibliotek som Google Fonts, kan du ladda upp teckensnittsfiler och sedan använda dem i teman eller referera till dem i formatmallar.

Använd anpassade teckensnitt i teman

I temaredigeraren kan du ladda upp ett eget 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 anpassade teckensnitt

• Navigera till ditt innehåll:

  • Sidor på webbplatsen: 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.
• Håll muspekaren över innehållet och klicka på Redigera.
• I innehållsredigeraren klickar du på menyn Redigera och väljer Tema: [Temats namn].
• I den vänstra sidomenyn klickar du på rullgardinsmenyn för teckensnitt och väljer Ladda upp ett eget teckensnitt.
• I den högra panelen anger du en etikett för teckensnittet i fältet Font Name .
• Klicka på Välj teckensnittsfiler och välj en eller flera teckensnittsfiler och klicka sedan på Nästa.

• Klicka på rullgardinsmenyn Font Style 1 och välj den stil som din teckensnittsfil använder. Du kan ställa in flera stilar för samma teckensnittsfil.
• Om du vill lägga till ytterligare typsnittsstilar klickar du på + Lägg till en annan typsnittsstil och lägger sedan till dina typsnittsstilar. Varje uppladdad teckensnittsfil måste ha minst en associerad stil.
• När du har lagt till alla tillämpliga teckensnittsstilar 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:

  • Sidor på webbplatsen: 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.
• Håll muspekaren över innehållet och klicka på Redigera.
• I innehållsredigeraren klickar du på menyn Redigera och väljer Tema: [Temats namn].
• I den vänstra sidomenyn klickar du på för att expandera avsnittet Fonts .
• Klicka på rullgardinsmenyn och väljHantera anpassade teckensnitt.
• Om du vill lägga till ett nytt teckensnitt klickar du på Lägg till ett eget teckensnitt i dialogrutan.
• Så här redigerar du ett teckensnitt:
  • I dialogrutan klickar du på rullgardinsmenyn Åtgärder bredvid teckensnittet och väljer Redigera.
  • Om du vill ändra namnet på teckensnittet klickar du på Redigera bredvid teckensnittsnamnet och anger sedan ett nytt namn.
  • Om du vill lägga till ytterligare teckensnittsstilar klickar du på Lägg till en annan teckensnittsstil , klickar sedan på rullgardinsmenyn Teckensnittsstil och väljer en stil. Klicka på Ladda upp och ladda sedan upp en teckensnittsfil.
  • Om du vill ta bort en teckensnittstil klickar du på deletededel  borttagningsikonen bredvid teckensnittstilen. Du kan inte ta bort en teckensnittstil om det inte finns några andra teckensnittstilar i listan.
  • 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 raderar ett teckensnitt tas det bort från alla rullgardinsmenyer, men teckensnittsfilerna ligger kvar i filverktyget tills de raderas där.

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

Använd anpassade teckensnitt i formatmallar

Som ett alternativ till att använda standardwebbteckensnitt eller använda ett teckensnittsbibliotek som Google Fonts, kan du hosta teckensnittsfiler i filverktyget och sedan referera till dem i din formatmall.

Observera: anpassade teckensnitt är endast tillgängliga i konton med tillgång till designhanteraren och måste tillämpas med CSS. Om du lägger till ett anpassat teckensnitt kommer teckensnittet inte att läggas till i rullgardinsmenyerna i innehållsredigeraren.

Om du vill använda ett teckensnitt i innehåll laddar du upp teckensnittsfilerna till filverktyget. Vi rekommenderar att du laddar upp minst .woff-, .ttf- och .eot-versioner av teckensnittet för att säkerställa att teckensnittet laddas i alla webbläsare. Du kan använda Expert-lä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.
• Klicka på Kopiera URL i den högra panelen för att kopiera den URL där filen finns. Du behöver URL-adressen för teckensnittet i varje filformat.

Använd ett anpassat teckensnitt i en formatmall

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

• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• I sökaren öppnar du den formatmall som används för ditt innehåll.
• För varje teckensnittsstil:
  • Överst i formatmallen 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 din_font_fil.xxx? med URL:en från filverktyget. Upprepa för varje filformat.
• Skapa CSS-regler med egenskapen font-family för att använda det anpassade teckensnittet.
• Klicka på Uppdatera eller Publicera längst upp till höger för att aktivera ändringarna.

Använd 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 standardwebbteckensnitt 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 anpassade kodade e-postmallen i sökaren.
• För varje typsnitt:
  • I mallens avsnitt <head> 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 din_font_fil.xxx? med URL:en från filverktyget. Upprepa för varje filformat.
• I koden för e-posttexten lägger du till det anpassade teckensnittet i inline styling.
• Klicka på Uppdatera eller Publicera längst upp till höger för att aktivera ändringarna.

Använd ett anpassat typsnitt i en CTA (arv)

När du har lagt till ett anpassat typsnitt i filverktyget kan du använda det i ä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änd 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.
• Klistra in följande kod i avsnittet module.css:

@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 din_font_fil.xxx? med URL:en från filverktyget. Upprepa för varje filformat.
• Skapa CSS-regler med egenskapen font-family för att använda det anpassade teckensnittet.
• Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar live.