Hoppa till innehåll
HubSpot Kunskapsbas
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.

Använd typsnitt i HubSpot

Senast uppdaterad: 1 juli 2026

Tillgänglig med något av följande abonnemang, om inte annat anges:

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

Innan du sätter igång

Innan du börjar använda typsnitt i HubSpot genomförs en granskning av kraven och vad du bör tänka på.

Behörigheter krävs En användare kan behöva ytterligare behörigheter beroende på var teckensnittet används:

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

  • Alla innehållstyper är inte tillgängliga på alla konton. För att se vilka innehållstyper som ingår i din prenumeration kan du genomföra en granskning av produkt & -tjänstekatalogen.
  • Granskning av tabellen nedan för att få en överblick över vilka teckensnittsalternativ som finns tillgängliga för varje innehållstyp:
Innehållstyp Teckensnitt  
  Standardtypsnitt Webbteckensnitt

Anpassade teckensnitt

  
Sida – temamallar ✓ Kan ställas in i temainställningarna och via stilmallen ✓  
Sida – kodad mall ✓ Kan användas via stilmall eller anpassad modul Tillgängligt via stilmall  
Blogg ✓ Kan användas via stilmall eller anpassad modul ✓  
E-postadress Vissa standardtypsnitt finns inte tillgängliga i dra-och-släpp-redigeraren för e-post Finns endast för e-postmallar med anpassad kodning; stöds inte i de flesta e-postprogram Finns endast för e-postmallar med anpassad kodning; stöds inte i de flesta e-postprogram  
Kunskapsbas Teckensnitt kan inte anpassas i artikelredigeraren Finns i temainställningarna  Finns i temainställningarna  
Anpassad modul ✓ Gäller anpassade moduler som inte används i e-postmeddelanden Gäller anpassade moduler som inte används i e-postmeddelanden  
CTA (äldre version) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

Använd standardteckensnitt i rich text-moduler

Standardtypsnitt stöds i allt innehåll på HubSpot, men vilka alternativ som finns tillgängliga och var du kan använda dem beror på innehållstypen.

  1. Navigera till ditt innehåll:

  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. Klicka pårullgardinsmenyn ”Teckensnitt”i verktygsfältet för formaterad text och välj ett teckensnitt. Följande teckensnitt finns tillgängliga i rich text-modulerna:
Standardtypsnitt
Varumärkesfonter Merriweather
Andale Mono Monaco
Arial Symbol
Boken Antiqua Tahoma
Courier New Terminal
Georgien Times New Roman
Helvetica Trebuchet, Mississippi
Effekt Verdana
Lato  

Använd webbteckensnitt

Webbtypsnitt stöds i vissa HubSpot-innehåll, men de finns inte tillgängliga i rullgardinsmenyn ”Typsnitt” i rich text-redigeraren. Beroende på innehållstyp kan webbtypsnitt användas i temainställningarna, i stilmallar, i anpassade moduler eller i kodade mallar. 

Utvecklare kan använda teckensnittsfältet för att lägga till webbteckensnitt i teman och anpassade moduler. När webbtypsnitt 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 tjänster från tredje part, till exempel 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. Skriv innamnet på etttypsnitt i sökfältet. 
  3. Klicka på teckensnittsnamnet för att visa en lista över de stilar som går att importera.
  4. Klicka på ”Hämta teckensnitt” uppe till höger.
  5. Klicka på ”Hämta inbäddningskod” uppe till höger.
  6. I den högra kolumnen väljer du @import på fliken Web .
  7. Kopiera @import- koden utan taggen <style> .
  8. Kopierakoden förCSS-klassen för att ställa in CSS-regler. 

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

Använda ett Google Font i ett stilark

  1. Kopiera teckensnittets @import-kod från Google Fonts.
  2. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
  3. Öppna den stilmall som används för ditt innehåll i Finder.
  4. Klistra in @import-koden på rad 1 i stilmallen. 
  5. Lägg till koden för att ange CSS-regler för de aktuella selektorerna i stilmallen.
  6. Klicka på”Publicera ändringar ” uppe till höger för att publicera dina ändringar. 

Använd ett Google Font i en egenutvecklad e-postmall

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

Prenumeration krävs Ett Marketing Hub Professional- eller Enterprise- abonnemang krävs för att skapa anpassade, kodade e-postmallar.


Så här lägger du till ett Google Font i en egenutvecklad e-postmall: 

  1. Kopiera teckensnittets @import-kod från Google Fonts.
  2. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
  3. Öppna den anpassade e-postmallen i Finder.
  4. I<head> avsnittet i mallen klistrar du in @import-koden mellan <style>....</style> taggarna. 
  5. I avsnittet ” <body> ” i mallen lägger du till det anpassade teckensnittet i inline-stilen. 
  6. Klicka på ”Publicera ändringar” uppe 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 typsnittet.
  2. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > CTA:er. Om Mer inte visas i ditt konto navigerar du direkt 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 det högra fönstret. 
  5. Klistra i 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-typsnitt i ett formulär

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > Formulär. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > Formulär.
  2. Håll muspekaren över formulärnamnet och klicka på Åtgärder > era ”Redigera formulär” eller ”Skapa ett nytt formulär”.
  3. I formulärredigeraren klickar du på fliken ”Förhandsgranskning” under ” & ”. 
  4. Klicka påavsnittet ”Stil”i menyn till vänster.
  5. Iavsnittet ”Text”klickar du på rullgardinsmenyn”Teckensnittsfamilj” och väljer ettGoogle Font. 
  6. Klicka på”Uppdatera” eller”Publicera” uppe till höger för att publicera dina ändringar. 

Använd ett Google Font i en anpassad modul

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

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
  2. Klicka på namnet på en anpassad modul i Finder. Läs mer om hur man skapar en anpassad modul.
  3. I inspektorn klickar du på rullgardinsmenyn ”Lägg till fält” iavsnittet ”Fält” och väljer ”Teckensnitt”. Läs mer om hur man arbetar med teckensnittsfält.
  1. Klicka på ”Publicera ändringar” uppe till höger för attpublicera dina ändringar. 
  2. Navigera till ditt innehåll:
  3. Klicka på namnet på innehållet med hjälp av den anpassade modulen. 
  4. Klicka på denanpassade modulen i innehållsredigeraren. 
  5. I redigeraren i sidofältet klickar du pårullgardinsmenyn i fältet ”Teckensnitt”och väljer ettGoogle Font. 

Använd egna typsnitt

Som ett alternativ till att använda vanliga webbtypsnitt eller ett typsnittsbibliotek somGoogle Fonts kan du ladda upp typsnittsfiler och sedan använda dem i teman eller hänvisa till dem i stilmallar. 

Använd anpassade teckensnitt i teman

I temaredigeraren laddar du upp ett eget typsnitt och använder sedan det typsnittet på sidor och i inlägg. Följande format stöds för teckensnittsfiler: TTF, OTF, WOFF.

Ladda upp egna typsnitt för sidor eller inlägg

När du har laddat upp egna typsnitt kommer de att vara tillgängliga för sidor, inlägg och artiklar i kunskapsbasen.

  1. Navigera till ditt innehåll:

  2. Klicka på namnet på ditt innehåll. 
  3. I innehållsredigeraren klickar du påmenyn Redigeraoch väljerTema: [Tematets namn].
  4. Klicka på valfrirullgardinsmeny för teckensnitt i menyn till vänster och välj”Hantera varumärkets teckensnitt”.
  5. Följ anvisningarna i den här kunskapsbasartikeln för att lägga till eller redigera dina teckensnitt.

Ladda upp egna teckensnitt för artiklar i kunskapsbasen

När du har laddat upp egna typsnitt kommer de att vara tillgängliga för sidor, inlägg och artiklar i Kunskapsbasen.

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Service > Kunskapsbas. Om Mer inte visas i ditt konto navigerar du direkt till Service > Kunskapsbas.
  2. Klicka på”Anpassa mall” uppe 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å valfrirullgardinsmeny för teckensnitt och välj”Hantera varumärkets teckensnitt”.
  6. Följ anvisningarna 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 typsnitt i temaredigeraren kan du ladda upp ytterligare typsnitt, anpassa befintliga typsnitt med ytterligare typsnittsstilar eller ta bort typsnitt.

Använda anpassade teckensnitt i stilmallar

Som ett alternativ till att använda vanliga webbteckensnitt eller ett teckensnittsbibliotek somGoogle Fonts kan du lägga upp teckensnittsfiler i filverktyget och sedan hänvisa till dem i ditt stilark. 

Observera: anpassadetypsnitt är endast tillgängliga för konton med åtkomst till Designhanteraren och måste tillämpas med hjälp av CSS. Om du lägger till ett anpassat typsnitt läggs detinte till i rullgardinsmenyerna för formatering i innehållsredigeraren.

För att använda ett typsnitt i innehållet ska du ladda upp typsnittets filer till filverktyget. Vi rekommenderar att du laddar upp åtminstone .woff-,.ttf- och .eot-versioner av teckensnittet för att säkerställa att det laddas i alla webbläsare. Du kan använda expertläget iFont Squirrels konverteringsverktygför att skapa ytterligare filformat.

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Filer. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Filer.
  2. Klicka påLadda upp filer.
  3. Markerateckensnittsfilerna på datorns hårddisk och klicka sedanpå Öppna.
  4. Klicka på namnet på en uppladdad teckensnittsfil.
  5. Klicka på”Kopiera URL ” i det högra fönstret för att kopiera den URL där filen finns. Du behöver URL-adressen till teckensnittet för varje filformat.

Använda ett anpassat teckensnitt i en stilmall

När du har lagt till ett anpassat teckensnitt i filverktyget kan du hänvisa till det i ett stilark. Varje typsnittsstil (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 klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
  2. Öppna den stilmall som används för ditt innehåll i Finder.
  3. För varje typsnitt: 
    • 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 ”Font Name” med namnet på teckensnittet.
    • Ersättyour_font_file.xxx? medURL :en från filverktyget. Upprepa detta för varje filformat.
  1. Skapa CSS-regler med egenskapen ` font-family ` för att använda det anpassade teckensnittet. 
  2. Klicka på ”Uppdatera” eller”Publicera” uppe till höger för att publicera dina ändringar. 

Använd ett eget typsnitt i ett e-postmeddelande i dra-och-släpp-redigeraren

Anpassade teckensnitt i e-postmeddelanden stöds i Apple Mail och stöds delvis i Samsung Mail. Anpassade teckensnitt stöds inte i Gmail, Outlook eller de flesta mobila webbläsare. För att säkerställa en enhetlig upplevelse för dina läsare rekommenderas det att du använder standardwebbteckensnitt i e-postmeddelanden.

Om du vill lägga till ett eget typsnitt i ett e-postmeddelande i dra-och-släpp-redigeraren kan du dock göra det efter att du har laddat upp ett eget typsnitt till ditt varumärkeskit och ställt in ett reservtypsnitt. 

  1. Lägg till ett anpassat typsnitt i din varumärkeskit och välj sedan det reservtypsnitt som ligger närmast ditt anpassade typsnitt. För att undvika problem med reservtypsnitt:  
  2. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > E-post. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > E-post.
  3. Klicka pånamnet påett mejl från e-postmarknadsföringen eller klicka påSkapa mejl för att skapa ett nytt mejl.
  4. Så här använder du ett anpassat teckensnitt för att formatera olika typer av text, till exempel stycken eller rubriker:
    • I e-postredigeraren klickar du på ikonen för malldesigni vänster sidopanel.
    • För att ställa in ett teckensnitt i avsnittet ”Textstilar”klickar du på enrullgardinsmeny ochväljer ettteckensnitt iavsnittet”Anpassade teckensnitt ”.

  1. Så här använder du ett anpassat teckensnitt i en rich text-modul: 
    • Markera text i ett RTF-modul i e-postredigeraren.
    • I rich text-redigeraren klickar du pårullgardinsmenyn för teckensnitt, håller muspekaren över”Anpassade teckensnitt”, sedan över ett anpassat teckensnitt och väljer enteckensnittsvikt.

  1. Skriv e-postmeddelandets innehåll och förhandsgranska sedan e-postmeddelandet i flera e-postklienter.
  2. Slutför och skicka e-postmeddelandet.

Använd ett eget typsnitt i en egenutvecklad e-postmall

Anpassade teckensnitt stöds i Apple Mail och stöds delvis i Samsung Mail. Anpassade teckensnitt stöds inte i Gmail, Outlook eller de flesta mobila webbläsare. För att säkerställa en enhetlig upplevelse för dina läsare rekommenderas det att du använder standardwebbteckensnitt i e-postmeddelanden.

Om du däremot vill lägga till ett anpassat typsnitt i en egenutvecklad e-postmall kan du göra det så snart du har lagt till det anpassade typsnittet i filverktyget.

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
  2. Klicka på namnet på din egenutvecklade e-postmall i Finder.
  3. För varje typsnitt:
    • I avsnittet ” <head> ” i mallen klistrar du in följande kod 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 ”Font Name” med namnet på teckensnittet.
    • Ersättyour_font_file.xxx? medURL:en från filverktyget. Upprepa detta för varje filformat. 
  1. Lägg till det anpassade teckensnittet i inline-stilen i koden för e-postmeddelandets brödtext. 
  2. Klicka på ”Uppdatera” eller”Publicera” uppe till höger för att publicera dina ändringar. 

Använd ett anpassat typsnitt i en CTA

När du har lagt till ett anpassat typsnitt i ditt tema kan du använda det i dina CTA-knappar.

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > CTA:er. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > CTA:er.
  2. Klicka på rullgardinsmenyn uppe till vänster och välj CTA:er
  3. Håll muspekaren över en CTA och klicka sedan på Åtgärder >Redigera. 
  4. Klicka på fliken Design i den vänstra panelen i CTA-redigeraren. 
  5. Klicka på avsnittet ”Stilar” för att visa hela innehållet.
  6. Klicka på rullgardinsmenyn ”Primärt typsnitt” och välj ditt eget typsnitt. 
  7. Fortsätt att skapa din CTA. 

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

Precis som med CTA:er kan du, efter att du har laddat upp en anpassad teckensnittsfil, använda den med äldre CTA:er.

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > CTA:er. Om Mer inte visas i ditt konto navigerar du direkt 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 det högra fönstret. 
  4. Klistra in följande kod i textrutan:

    font-family: 'Your Font Name';
  5. Ersätt ”Font Name” mednamnet på teckensnittet.
  6. Klicka på”Nästa” längst ned till höger. Klicka sedan på Spara.

Använda ett anpassat teckensnitt 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 eget typsnitt i en egenutvecklad e-postmall. 

  1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
  2. Klicka på namnet på den anpassade modulen i Finder.
  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');}

    • Ersätt ”Font Name” med namnet på teckensnittet.
    • Ersättyour_font_file.xxx? medURL:en från filverktyget. Upprepa detta för varje filformat.
  2. Skapa CSS-regler med egenskapen ` font-family ` för att använda det anpassade teckensnittet. 
  3. Klicka på ”Publicera ändringar” uppe till höger för att publicera dina ändringar. 
Hjälpte artikeln?
Detta formulär används endast för dokumentationsfeedback. Få reda på hur du får hjälp med HubSpot.

Relaterat innehåll

Innehållsförteckning /sv/website-and-landing-pages/use-fonts-in-hubspot Meny

Relaterat innehåll

New call-to-action