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: 25 februari 2026

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

De 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 (som Google Fonts) och anpassade teckensnitt har ytterligare begränsningar, som beskrivs nedan: 

Innehållstyp Typsnitt  
  Standardteckensnitt Webbtypsnitt

Anpassade teckensnitt

  
Sida – temamallar ✓ Tillgängligt i temainställningar och via stilmall ✓  
Sida – kodad mall ✓ Tillgänglig via stilmall eller anpassad modul Tillgänglig via stilmall  
Blogg ✓ Tillgänglig via stilmall eller anpassad modul ✓  
E-post Vissa standardteckensnitt är inte tillgängliga i dra-och-släpp-redigeraren för e-post. Endast tillgängligt för anpassade kodade e-postmallar; stöds inte i de flesta e-postklienter Endast tillgängligt för anpassade kodade e-postmallar; stöds inte i de flesta e-postklienter  
Kunskapsbas Teckensnitt kan inte anpassas i artikelredigeraren Tillgängligt i temainställningarna  Tillgängligt i temainställningarna  
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 version) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

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 i rich text-moduler

Standardtypsnitt kan användas i alla typer av innehåll och är utformade för att laddas på de flesta plattformar och enheter. 

  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 texten du vill redigera. 
  4. Klicka pårullgardinsmenyn Teckensnitti verktygsfältet för rik text och välj ett teckensnitt. Följande teckensnitt är tillgängliga i moduler för rik text: 
    • Varumärkessnitt

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*

    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Ej tillgängligt i dra-och-släpp-redigeraren för e-post. 

**Endast tillgängligt som webbteckensnitt i dra-och-släpp-redigeraren för e-post.

Använd webbtypsnitt

Webbteckensnitt är tillgängliga som standard i innehållsredigeraren.

Om du är utvecklare kan du också använda teckensnittsfältet för att lägga till webbteckensnitt till teman och anpassade moduler. När de används på dessa sätt laddas webbteckensnitt inte från en tredjepartstjänst. HubSpot laddar dem istället direkt på innehållets domän.

Observera: webbtypsnitt kan inte väljas i typsnittsmenyn i redigeraren för rik text. 

Du kan också använda tjänster från tredje part, så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å teckensnittets namn för att visa en lista över stilar som kan importeras.
  4. Klicka på + Välj denna stil bredvid varje stil som du vill importera.
  5. I den högra panelen väljer du@import iavsnittet Använd på webben. 
  6. Kopiera teckensnittets kod: 
    • I avsnittet Använd på webben kopierar du @import-koden utan taggen <style>.
    • Ifältet CSS-regler för att ange familjer kopierar dukodenfö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änd ett Google Font i ett stilmall

  1. Kopiera teckensnittets @import-kod från Google Fonts.
  2. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  3. Öppna stilmallen som används för ditt innehåll i sökfunktionen.
  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 kodad e-postmall

Även om Google Fonts stöds av Apple Mail och några andra e-postklienter är det breda stödet begränsat och de flesta populära e-postklienterna stöder endast standardwebbtypsnitt. Läs mer om hur du väljer standardtypsnitt som används i den klassiska e-postredigeraren. 
 
Anpassade kodade e-postmallar är endast tillgängliga i konton med Marketing Hub Professional - eller Enterprise-abonnemang. 
 
Så här lägger du till ett Google-teckensnitt i en anpassad kodad e-postmall: 
  1. Kopiera teckensnittets @import-kod från Google Fonts.
  2. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  3. Öppna den anpassade kodade e-postmallen i sökfunktionen.
  4. I avsnittet<head> i mallen klistrar du in @import-koden mellan taggarna <style>....</style>. 
  5. I koden för e-postmeddelandets brödtext lägger du till det anpassade teckensnittet i inline-styling. 
  6. Klicka på Publicera ändringarlängst upp till höger för att publicera dina ändringar. 

Använda ett Google-teckensnitt 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 den högra panelen. 
  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ärets namn 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-teckensnitt. 
  6. Klicka påUppdatera ellerPublicera längst upp till höger för att publicera dina ändringar. 

Använda ett Google-teckensnitt i en anpassad modul

Observera: Google Fonts ä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. Öppna den anpassade modulen i sökfunktionen till vänster. Läs mer om hur du skapar en anpassad modul.
  3. Klicka pårullgardinsmenynLägg till fältiavsnittetFält i inspektören till högeroch väljTeckensnitt. Läs mer om hur du arbetar med teckensnittsfält.

  4. Klicka på Publicera ändringarlängst upp till höger för attpublicera dina ändringar. 

  5. Navigera till ditt innehåll:

  6. Klicka på namnet på innehållet som använder den anpassade modulen. 
  7. Klicka på denanpassade modulen i innehållsredigeraren. 
  8. I sidofältets redigerare klickar du pårullgardinsmenyn Teckensnittsfältoch väljer ettGoogle-teckensnitt. 

Använd anpassade teckensnitt

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

Använd anpassade teckensnitt i teman

I temaredigeraren kan du ladda upp ett anpassat typsnitt och sedan använda det typsnittet i sidor och inlägg. Typsnittsfiler 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 blir de tillgängliga för sidor, inlägg eller kunskapsbasartiklar.

  1. Navigera till ditt innehåll:

  2. Klicka på namnet på ditt innehåll. 
  3. Klicka påmenyn Redigerai innehållsredigeraren och väljTema: [Namn på tema].
  4. Klicka på valfrirullgardinsmeny för teckensnitt i menyn i vänster sidofält och väljHantera varumärkets teckensnitt.
  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å valfrirullgardinsmeny för teckensnitt och väljHantera varumärkets teckensnitt.
  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änd 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. Om du lägger till ett anpassat teckensnitt läggsinte teckensnittet till i rullgardinsmenyerna för stil i innehållsredigeraren. 

Om du vill använda ett teckensnitt i innehållet laddar du upp teckensnittsfilerna till filverktyget. Vi rekommenderar att du laddar upp minst .woff-, .ttf- och .eot-versionerna 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 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 sedan påÖppna. 
  4. Klicka på namnet på en uppladdad teckensnittsfil. 
  5. Klicka påKopiera URL i den högra panelen 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 ett formatmall

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

  1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  2. Öppna stilmallen som används för ditt innehåll i Finder.
  3. För varje teckensnittsstil: 
    • 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 teckensnittsnamn med namnet på teckensnittet.
      • Ersättdin_typsnittsfil.xxx? medURL: en från filverktyget. Upprepa för varje filformat.
  1. Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet. 
  2. 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 ändå 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. Öppna den anpassade kodade e-postmallen i Finder.
  3. För varje teckensnittsstil:
    • 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');}
    • Ersätt ditt teckensnittsnamn med namnet på teckensnittet.
    • Ersättyour_font_file.xxx? medURL:en från filverktyget. Upprepa för varje filformat. 
  1. I koden för e-postmeddelandets brödtext lägger du till det anpassade teckensnittet i inline-styling. 
  2. 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. Klicka på fliken Design i den vänstra panelen i CTA-redigeraren. 
      5. Klicka på avsnittet Stilar för att expandera det.
      6. Klicka på rullgardinsmenyn Primär typsnitt och välj ditt anpassade typsnitt. 
      7. Fortsätt skapa din CTA. 

 

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

På samma sätt som med CTA:er kan du, efter att ha laddat upp en anpassad formulärfil, använda den med äldre CTA:er:

      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: 'Ditt teckensnittsnamn';
      5. Ersätt ditt teckensnittsnamnmednamnet på teckensnittet.
      6. 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 anpassad kodad e-postmall. 

  1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  2. Öppna den anpassade modulen isökfunktionen.
  3. I avsnittet module.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');}
  1. Ersätt ditt teckensnittsnamn med namnet på teckensnittet.
  2. Ersättyour_font_file.xxx? medURL:en från filverktyget. Upprepa för varje filformat.
  3. Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet. 
  4. Klicka på Publicera ändringarlängst upp 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