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, 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 > Blogg.
  • 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.
• 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, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• 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, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Ö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, navigera till Marknadsföring > Infångande av potentiell kund > Call-to-action.
• 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, navigera till Marknadsföring > Infångande av potentiell kund > 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, 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 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, 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 > 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 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. HubSpot rekommenderar att du laddar upp minst .woff-, .ttf- och .eot-versionerna 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, navigera till Marknadsföring > Filer och mallar > 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, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• 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, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Ö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, navigera till Marknadsföring > Infångande av potentiell kund > Call-to-action.
• 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är dig hur du lägger till ett anpassat teckensnitt i en e-postmall med anpassad kod.

• 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 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.