Använd typsnitt i HubSpot

Teckensnitt i HubSpot är tillgängliga på olika sätt beroende på innehållstyp och teckensnittstyp. Vissa standardteckensnitt finns tillgängliga i alla innehållsredigerare. Webbteckensnitt och anpassade teckensnitt kan behöva läggas till i temainställningar, stilmallar, anpassade moduler eller kodade mallar.

Innan du börjar

Innan du börjar använda teckensnitt i HubSpot bör du gå igenom kraven och vad du bör tänka på.

Förstå begränsningar och överväganden

• Alla innehållstyper är inte tillgängliga i alla konton. För att bekräfta vilka innehållstyper som är tillgängliga för ditt abonnemang, se produkt- och tjänstekatalogen.
• Granska tabellen nedan för att förstå vilka teckensnittsalternativ som är tillgängliga för varje innehållstyp:

Använd standardteckensnitt i rich text-moduler

Standardteckensnitt stöds i allt HubSpot-innehåll, men de tillgängliga alternativen och var du kan använda dem beror på innehållstypen.

1. Navigera till ditt innehåll:

   • Webbsidor: 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.
   • E-post: I ditt HubSpot-konto, navigera till Marknadsföring > E-post.
2. Klicka på namnet på ditt innehåll.
3. I innehållsredigeraren klickar du på enrich text-modul och markerar sedan den text du vill redigera. 
4. I verktygsfältet för rik text klickar du pårullgardinsmenyn Teckensnittoch väljer ett teckensnitt. Följande teckensnitt är tillgängliga i moduler för rik text:

Använd webbtypsnitt

Webbtypsnitt stöds i vissa HubSpot-innehåll, men de är inte tillgängliga i rullgardinsmenyn Font i rich text-redigeraren. Beroende på innehållstyp kan webbtypsnitt tillämpas i temainställningar, stilmallar, anpassade moduler eller kodade mallar. 

Utvecklare kan använda teckensnittsfältet för att lägga till webbteckensnitt till teman och anpassade moduler. När webbteckensnitt läggs till på detta sätt laddar HubSpot dem direkt på

innehållets

domän istället för att ladda dem från en tredjepartstjänst.

Använd tredjepartstjänster som Google Fonts genom att kopiera teckensnittets importkod, klistra in den i innehållets stilmall och sedan tillämpa teckensnittet via CSS:

1. Gå till fonts.google.com.
2. Ange ettteckensnittsnamn i sökfältet. 
3. Klicka på teckensnittsnamnet för att visa en lista över stilar som kan importeras.
4. Klicka på Hämta typsnitt längst upp till höger.
5. Klicka på Hämta inbäddningskod längst upp till höger.
6. I den högra kolumnen väljer du @import på fliken Web.
7. Kopiera @import- koden utan taggen <style>.
8. KopieraCSS-klasskoden för att ställa in CSS-regler. 

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

• • Använd ett Google-typsnitt i ett formatmall
  • Använd ett Google-typsnitt i en anpassad e-postmall
  • Använd ett Google-typsnitt i en CTA (äldre version)
  • Använd ett Google-typsnitt i ett formulär
  • Använd ett Google-typsnitt i en anpassad modul

Använd ett Google-typsnitt i ett formatmall

1. Kopiera teckensnittets @import-kod från Google Fonts.
2. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
3. Öppna det stilark som används för ditt innehåll i Finder.
4. Klistra in @import-koden i rad 1 i stilmallen. 
5. Lägg till koden för att ställa in CSS-regler till lämpliga selektorer i stilmallen.
6. Klicka påPublicera ändringar längst upp till höger för att publicera dina ändringar. 

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

Google Fonts stöds i Apple Mail och några andra e-postklienter, men det breda stödet är begränsat. De flesta populära e-postklienter stöder endast standardwebbteckensnitt. Läs mer om hur du väljer standardteckensnitt som används i den klassiska e-postredigeraren. 

Så här lägger du till ett Google-typsnitt i en anpassad kodad e-postmall: 

1. Kopiera typsnittets @import-kod från Google Fonts.
2. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
3. Öppna den anpassade e-postmallen i sökfunktionen.
4. I avsnittet<head> i mallen klistrar du in @import-koden mellan taggarna <style>....</style>. 
5. I avsnittet <body> i mallen lägger du till det anpassade typsnittet i inline-styling. 
6. Klicka på Publicera ändringarlängst upp till höger för att publicera dina ändringar. 

Använd ett Google-typsnitt i en CTA (äldre version)

1. Kopiera Googles kod för att ställa in CSS-regler för det teckensnittet.
2. I ditt HubSpot-konto navigerar du till Marknadsföring > CTA :er.
3. Håll muspekaren över en CTA och klicka sedan på Åtgärder > Redigera. 
4. Klicka påAvancerade alternativ i panelen till höger. 
5. Klistra in Googles kod för att ställa in CSS-regler för det teckensnittet i textrutan. 
6. Klicka påNästa längst ned till höger. Klicka sedan på Spara.

Använd ett Google-teckensnitt i ett formulär

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över formulärnamnet och klicka på Åtgärder > Redigera formulär eller Skapa ett nytt formulär.
3. I formulärredigeraren klickar du på fliken Stil och förhandsgranskning. 
4. Klicka påavsnittet Stili menyn i vänster sidfält.
5. Iavsnittet Textklickar du på rullgardinsmenynTeckensnittsfamilj och väljer ettGoogle Font. 
6. Klicka påUppdatera ellerPublicera längst upp till höger för att publicera dina ändringar. 

Använd ett Google-typsnitt i en anpassad modul

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

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. I sökaren klickar du på namnet på en anpassad modul. Läs mer om hur du skapar en anpassad modul.
3. I inspektorn klickar du på rullgardinsmenyn Lägg till fältiavsnittet Fältoch väljer Teckensnitt. Läs mer om att arbeta med teckensnittsfält.

4. Klicka på Publicera ändringarlängst upp till höger för attpublicera dina ändringar. 
5. 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.
6. Klicka på namnet på innehållet med hjälp av det anpassade modulen. 
7. I innehållsredigeraren klickar du på denanpassade modulen. 
8. I sidofältets redigerare klickar du pårullgardinsmenyn i fältet Teckensnittoch väljer ettGoogle-teckensnitt. 

Använda anpassade teckensnitt

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

Använda anpassade teckensnitt i teman

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

Ladda upp anpassade teckensnitt för sidor eller inlägg

När du har laddat upp anpassade teckensnitt kommer de att vara tillgängliga för sidor, inlägg eller kunskapsbasartiklar.

1. 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.
2. Klicka på namnet på ditt innehåll. 
3. I innehållsredigeraren klickar du påmenyn Redigeraoch väljerTema: [Namn på tema].
4. I menyn i vänster sidfält klickar du på valfriteckensnittsrullgardinsmeny och väljerHantera varumärkesteckensnitt.
5. Följ stegen i den här kunskapsbasartikeln för att lägga till eller redigera dina teckensnitt.

Ladda upp anpassade teckensnitt för kunskapsbasartiklar

När du har laddat upp anpassade teckensnitt kommer de att vara tillgängliga för sidor, inlägg eller kunskapsbasartiklar.

1. I ditt HubSpot-konto navigerar du till Service > Kunskapsbas.
2. Klicka påAnpassa mall längst upp till höger.
3. Klicka på fliken Design i vänster sidofält.
4. Klicka på Teckensnittsstilar i vänster sidofält.
5. Klicka på valfriteckensnittsmeny och väljHantera varumärkesteckensnitt.
6. Följ stegen i den här kunskapsbasartikeln för att lägga till eller redigera dina teckensnitt.

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.

Använda anpassade teckensnitt i stilmallar

Som ett alternativ till att använda standardwebbteckensnitt eller ett teckensnittsbibliotek somGoogle Fonts kan du lagra teckensnittsfiler i filverktyget och sedan referera till dem i din stilmall.

Observera: anpassadeteckensnitt är endast tillgängliga i konton med åtkomst till designhanteraren och måste tillämpas med CSS. Att lägga till ett anpassat teckensnitt läggerinte till teckensnittet i rullgardinsmenyerna för utformning i innehållsredigeraren.

För att använda ett teckensnitt i innehållet laddar du upp teckensnittsfilerna till filverktyget. Det rekommenderas att ladda upp åtminstone .woff-,.ttf - och .eot-versioner av teckensnittet för att säkerställa att teckensnittet laddas i alla webbläsare. Du kan använda expertläget iFont Squirrels konverteringsverktygför att generera ytterligare filformat.

1. I ditt HubSpot-konto, navigerar du till Innehåll > Filer. Om du använder HubSpots gratisverktyg navigerar du till Marknadsföring > E-post. Längst upp till höger klickar du på E-postverktyg och väljer Filer.
2. Klicka påLadda upp filer.
3. Väljteckensnittsfilerna på datorns hårddisk och klicka sedanpå Öppna.
4. Klicka på namnet på en uppladdad teckensnittsfil.
5. I den högra panelen klickar du påKopiera URL för att kopiera URL:en där filen finns. Du behöver URL:en för teckensnittet i varje filformat.

Använd ett anpassat teckensnitt i en stilmall

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

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Öppna det stilmall som används för ditt innehåll i sökfunktionen.
3. För varje typsnittsstil: 
   • Klistra in följande kod högst upp i stilmallen: 

@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 typsnittsnamn med namnet på typsnittet.
  • Ersättdin_teckensnittsfil.xxx? medURL: en från filverktyget. Upprepa för varje filformat.

4. Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet. 
5. Klicka på Uppdatera ellerPublicera längst upp till höger för att publicera dina ändringar. 

Använd ett anpassat teckensnitt i en anpassad kodad e-postmall

Anpassade teckensnitt stöds inte i 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 standardwebbteckensnitt i e-postmeddelanden. Om du dock vill lägga till ett anpassat teckensnitt i en anpassad kodad e-postmall kan du göra det när du har lagt till det anpassade teckensnittet i filverktyget.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. I sökaren klickar du på namnet på din anpassade e-postmall.
3. För varje typsnittsstil:
   • 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');}

1. • Ersätt Ditt typsnittsnamn med namnet på typsnittet.
   • Ersättdin_teckensnittsfil.xxx? medURL:en från filverktyget. Upprepa för varje filformat. 

4. I koden för e-postmeddelandets brödtext lägger du till det anpassade teckensnittet i inline-formatering. 
5. Klicka på Uppdatera ellerPublicera längst upp till höger för att publicera dina ändringar. 

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.

1. I ditt HubSpot-konto navigerar du till Marknadsföring > CTA :er.
2. Klicka på rullgardinsmenyn längst upp till vänster och välj CTA:er
3. Håll muspekaren över en CTA och klicka sedan på Åtgärder > Redigera. 
4. I den vänstra panelen i CTA-redigeraren klickar du på fliken Design. 
5. Klicka på avsnittet Stilar för att expandera det.
6. Klicka på rullgardinsmenyn Primärt teckensnitt och välj ditt anpassade teckensnitt. 
7. Fortsätt att skapa din CTA. 

Använd ett anpassat teckensnitt i en CTA (

äldre

version)

Precis som med CTA:er kan du använda ett anpassat teckensnitt med äldre CTA:er efter att du har laddat upp en teckensnittsfil.

1. I ditt HubSpot-konto navigerar du till Marknadsföring > CTA :er.
2. Håll muspekaren över en CTA och klicka sedan på Åtgärder > Redigera. 
3. Klicka påAvancerade alternativ i den högra panelen. 
4. Klistra in följande kod i textrutan:
   
   font-family: 'Your Font Name';
5. Ersätt Ditt typsnittsnamn mednamnet på typsnittet.
6. Klicka påNästa längst ned till höger. Klicka sedan på Spara.

Använd 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 e-postmall. 

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på namnet på den anpassade modulen i sökaren.
3. I modulredigeraren, i avsnittetmodule.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');}

5. • Ersätt Ditt typsnittsnamn med namnet på typsnittet.
   • Ersättyour_font_file.xxx? medURL:en från filverktyget. Upprepa för varje filformat.
6. Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet. 
7. Klicka på Publicera ändringarlängst upp till höger för att publicera dina ändringar.