Använd teckensnitt i HubSpot

Vilka typsnitt som är tillgängliga för innehåll i HubSpot beror på innehållstyp och typsnittstyp. Vissa standardtypsnitt är tillgängliga i alla innehållsredigerare, medan webbtypsnitt (t.ex. Google Fonts) och anpassade typsnitt har ytterligare begränsningar som beskrivs nedan:

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

Använd standardtypsnitt

Standardtypsnitt 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:

  • Sidor på webbplatsen: I ditt HubSpot-konto, navigera till Marknadsföring > Webbsida > Sidor på webbplatsen.
  • Landningssidor: I ditt HubSpot-konto, navigera till Marknadsföring > Landningssidor.
  • Blogg: I ditt HubSpot-konto, navigera till Marknadsföring > Webbsida.
  • Kunskapsbas: I ditt HubSpot-konto, navigera till Service > Kunskapsbas
  • E-post: I ditt HubSpot-konto, navigera till Marknadsföring > E-post.
• Håll muspekaren över innehållet och klicka på Redigera.
• I innehållsredigeraren klickar du på en modul för rik text och markerar sedan den text som du vill redigera.
• Klicka på rullgardinsmenyn Teckensnitt i verktygsfältet för rik text och välj ett teckensnitt. Följande typsnitt finns tillgängliga i moduler för rik text:

  • Andale Mono*

  • Arial

  • Bok Antiqua*

  • Courier Ny

  • Georgien

  • Helvetica

  • Effekt*

  • Lato**
  • Merriweather**

• • Monaco*

• • Symbol*

  • Tahoma

  • Terminal*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Inte tillgänglig i redigeringsverktyget för dra och släpp e-post.

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

Använd webbtypsnitt

Webbtypsnitt är tillgängliga som standard i innehållsredigeraren för sidor som använder startmallar och teman, samt kunskapsbasartiklar 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, utan HubSpot serverar dem direkt på den domän som sidan laddas på.

Observera att webbtypsnitt inte kan väljas i rullgardinsmenyn för typsnitt i redigeringsverktyget för rik text.

Du kan också använda tredjepartstjänster som Google Fonts genom att kopiera teckensnittets importkod, klistra in den i sidans formatmall och sedan använda teckensnittet via CSS:

• Gå till fonts.google.com.
• Ange ett teckensnittsnamn i sökfältet.
• Klicka på teckensnittsnamnet för att visa en lista över stilar som kan importeras.
• Bredvid varje stil som du vill importera klickar du på + Välj den här stilen.
• 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 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 en Google Font i ett formatmallblad
• Använda en Google Font i en anpassad kodad e-postmall
• Använd en Google Font i en CTA
• Använd en Google Font i ett formulär
• Använda en Google Font i en anpassad modul

Använda en Google Font i ett formatmallblad

• Kopiera teckensnittets @importkod från Google Fonts.
• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Öppna formatmallarna som används för ditt innehåll i sökaren.
• Klistra in @import-koden på rad 1 i formatmallen.
• Lägg till koden för att ställa in CSS-regler till lämpliga selektorer i formatmallarna.

• Klicka på Publicera eller Uppdatera i det övre högra hörnet för att ta ändringarna i bruk.

Använda en Google Font i en anpassad kodad e-postmall

• Kopiera teckensnittets @importkod från Google Fonts.
• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Öppna den anpassade kodade e-postmallen i sökaren.
• Klistra in @import-koden mellan <style>....</style>-taggarna i avsnittet <head> i mallen.
• Lägg till det anpassade teckensnittet i koden för e-postkroppen i inline-stilen.
• Klicka på Uppdatera eller Publicera i det övre högra hörnet för att ta ändringarna i bruk.

Använd en Google Font i en CTA

• Kopiera Googles kod för att ställa in CSS-regler för teckensnittet.
• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > CTA.
• Håll muspekaren över en CTA, klicka sedan på rullgardinsmenyn Åtgärder och välj Redigera.
• Klicka på Avancerade alternativ i den högra panelen.
• Klistra in Googles kod för att ställa in CSS-regler för teckensnittet i textrutan.
• Klicka på Nästa längst ner till höger. Klicka sedan på Spara.

Använd en Google Font i ett formulär

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.
• Håll muspekaren över formulärets namn och klicka på Åtgärder > Redigera formulär eller Skapa ett nytt formulär.
  
• Klicka på fliken Stil och förhandsgranskning i formulärredigeraren.
• Klicka på avsnittet Stil i den vänstra menyn i sidofältet.
• I avsnittet Text klickar du på rullgardinsmenyn Teckensnittsfamilj och väljer en Google Font.
• Klicka på Uppdatera eller Publicera i det övre högra hörnet för att ta ändringarna i bruk.

Använda en 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, navigera till Marknadsföring > Filer och mallar > Designverktyg.

• Öppna den anpassade modulen i sökaren till vänster. Läs mer om hur du skapar en anpassad modul.
• I inspektorn 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 fält för teckensnitt.

• Klicka på Publicera ändringar i det övre högra hörnet för att ta ändringarna i bruk.

• Navigera till ditt innehåll:

  • Sidor på webbplatsen: I ditt HubSpot-konto, navigera till Marknadsföring > Webbsida > Sidor på webbplatsen.
  • Landningssidor: I ditt HubSpot-konto, navigera till Marknadsföring > Landningssidor.
  • Blogg: I ditt HubSpot-konto, navigera till Marknadsföring > Webbsida.
• Håll muspekaren över innehållet i den anpassade modulen och klicka på Redigera.
• Klicka på den anpassade modulen i innehållsredigeraren.
• Klicka på rullgardinsmenyn Fontfältet i sidobarredigeraren och välj en Google Font.

Använd anpassade typsnitt

Som ett alternativ till att använda vanliga webbtypsnitt eller ett typsnittsbibliotek somGoogle Fonts kan du lägga upp typsnittsfiler i filverktyget och sedan referera till dem i formatmallarna.

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

Om du vill använda ett typsnitt i innehåll laddar du upp typsnittets filer till filverktyget. HubSpot rekommenderar att du laddar upp minst .woff-, .ttf- och . eot-versionerna av teckensnittet för att se till att teckensnittet 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, navigera till Marknadsföring > Filer och mallar > Filer.
• Klicka på Ladda upp filer.
• Välj teckensnittsfilerna på datorns hårddisk och klicka sedan på Öppna.
• Klicka på namnet på en uppladdad typsnittsfil.
• I den högra panelen klickar du på Kopiera URL för att kopiera den URL där filen finns. Du behöver URL:en för teckensnittet i varje filformat.

Använda ett anpassat typsnitt i ett formatmallblad

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

• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Öppna formatmallarna som används för ditt innehåll i sökaren.
• För varje typsnitt:
  • Klistra in följande kod högst upp i formatmallen:

@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 ditt teckensnittsnamn med teckensnittets namn.
  • Ersättyour_font_file.xxx?medURL: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 i det övre högra hörnet för att ta ändringarna i bruk.

Använda ett anpassat typsnitt i en anpassad kodad e-postmall

Anpassade typsnitt stöds inte av de flesta populära e-postklienter. För att säkerställa en enhetlig upplevelse för dina läsare rekommenderas att du använder standardtypsnitt för webben i e-postmeddelanden. Men om du vill lägga till ett anpassat typsnitt i en skräddarsydd kodad e-postmall kan du göra det när du har lagt till det anpassade typsnittet i filverktyget.

• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Öppna den anpassade kodade e-postmallen i sökaren.
• För varje typsnitt:
  • Klistra in den här koden mellan <style>....</style>-taggarna i avsnittet <head> i mallen:

@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 ditt teckensnittsnamn med teckensnittets namn.
  • Ersättyour_font_file.xxx?medURL:en från filverktyget. Upprepa för varje filformat.
• Lägg till det anpassade teckensnittet i koden för e-postkroppen i inline-stilen.
• Klicka på Uppdatera eller Publicera i det övre högra hörnet för att ta ändringarna i bruk.

Använd ett anpassat typsnitt i en CTA

När du har lagt till ett anpassat typsnitt i filverktyget kan du använda det i CTA:er:

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > CTA.
• Håll muspekaren över en CTA, klicka sedan på rullgardinsmenyn Åtgärder och välj Redigera.
• Klicka på Avancerade alternativ i den högra panelen.
• Klistra in den här koden i textrutan:

font-family: "Ditt typsnittsnamn";

• Ersätt ditt teckensnittsnamn med teckensnittets namn.
• Klicka på Nästa längst ner till höger. Klicka sedan på Spara.

Använda ett anpassat typsnitt i en anpassad modul

När du har lagt till ett anpassat typsnitt i filverktyget kan du använda det i anpassade blogg- eller sidmoduler. Lär dig hur du lägger till ett anpassat typsnitt i en anpassad kodad e-postmall.

• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Ö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 ditt teckensnittsnamn med teckensnittets namn.
• Ersättyour_font_file.xxx?medURL: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 i det övre högra hörnet för att ta ändringarna i bruk.