Använd teckensnitt i HubSpot
Senast uppdaterad: oktober 27, 2023
Tillgänglig med något av följande abonnemang, om inte annat anges:
|
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:
Typ av innehåll | Typ av teckensnitt | |||
Standardteckensnitt | Webbtypsnitt | Anpassade teckensnitt |
||
Sida - startmallar | ✓ | Tillgänglig på flikenStilar i innehållsredigeraren | Ej tillgänglig | |
Sida - temamallar | ✓ | Tillgänglig i temainställningar och via stilmallar | Tillgänglig via formatmall | |
Sida - kodad mall | ✓ | Tillgänglig via stilmall eller anpassad modul | Tillgänglig via formatmall | |
Blogg | ✓ | Tillgänglig via stilmall eller anpassad modul | Tillgänglig via formatmall | |
E-post | Vissa standardteckensnitt är inte tillgängliga i dra-och-släpp e-postredigeraren | Endast tillgängligt för specialkodade e-postmallar; stöds inte i de flesta e-postklienter | Endast tillgängligt för specialkodade e-postmallar; stöds inte i de flesta e-postklienter | |
Kunskapsbas | ✓ | Tillgänglig på fliken Design i mallredigeraren | Ej tillgänglig | |
Anpassad modul | ✓ | Tillgänglig för anpassade moduler som inte används i e-postmeddelanden | Tillgänglig för anpassade moduler som inte används i e-postmeddelanden | |
CTA (äldre) | ✓ | ✓ | ✓ |
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.