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: 26 maj 2025

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

Typ av innehåll Typ av typsnitt
Standardteckensnitt Webbtypsnitt

Anpassade teckensnitt
Sida - mallar för teman ✓ Finns i temainställningar och via stylesheet ✓
Sida - kodad mall ✓ Tillgänglig via stylesheet eller anpassad modul Tillgänglig via stilmall
Blogg ✓ Tillgänglig via stylesheet 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 mallar för e-post med kundkod; stöds inte i de flesta e-postklienter Endast tillgängligt för mallar med egen kod; stöds inte i de flesta e-postklienter
Kunskapsbas Det går inte att anpassa typsnitt 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-post Tillgänglig för anpassade moduler som inte används i e-post
CTA (äldre) ✓ ✓ ✓
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 rikstextmoduler

Standardteckensnitt 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:

    • Sidor på webbplatsen: 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 redigeraren för innehåll klickar du på en rik text-modul och markerar sedan den text du vill redigera.
  4. I verktygsfältet för rik text klickar du på rullgardinsmenyn Teckensnitt och väljer ett teckensnitt. Följande teckensnitt är tillgängliga i rikstextmoduler:

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*

    • Symbol*

    • Tahoma

    • Avsluta*

    • Times New Roman

    • Trebuchet MS

    • Verdana

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

**Bara tillgängligt som ett webbtypsnitt i dra-och-släpp-redigeraren för e-post.

Använd webbteckensnitt

Webbtypsnitt är tillgängliga som standard i redigeraren för innehåll.

Om du är utvecklare kan du också använda font-fältet för att lägga till webbtypsnitt i teman och anpassade moduler. När de används på dessa sätt laddas inte webbtypsnitt 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:

  1. Navigera till fonts.google.com.
  2. Ange ett typsnittsnamn i sökfältet.
  3. Klicka på teckensnittets namn för att visa en lista över stilar som är tillgängliga för import.
  4. Klicka på + Välj den här stilen bredvid varje stil som du vill importera
  5. I den högra panelen väljer du @import i avsnittet Använd på webben .
  6. Kopiera teckensnittets kod:
    • I avsnittet Använd på webben kopierar du @import-koden utan taggen <style>.
    • I fältet CSS-regler för att ange familjer kopierar du -koden för att ställa in CSS-regler.

copy-google-font

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

Använda ett Google-teckensnitt i en formatmall

  1. Kopiera typsnittets @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ökaren.
  4. Klistra in @import-koden på rad 1 i stilmallen.
  5. Lägg till koden för att ställa in CSS-regler till lämpliga väljare i stilmallen.
  6. Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.
add-google-fonts-imported-font-to-stylesheet

Använd ett Google Font i en e-postmall med anpassad kod

Även om Google Fonts stöds av Apple E-post och några andra e-postklienter, är det breda stödet begränsat och de flesta populära e-postklienter stöder endast standardteckensnitt för webb. Läs mer om hur du välja de standardteckensnitt som används i den klassiska redigeraren för e-post.
 
Mallar för e-post med Kundkod är endast tillgängliga på konton med en Marketing Hub Professionell eller Enterprise prenumeration.
 
Så här lägger du till ett Google Font i en e-postmall med anpassad kod:
  1. Kopiera typsnittets @import-kod från Google Fonts.
  2. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  3. Öppna den specialkodade e-postmallen i sökaren.
  4. I avsnittet<head> i mallen klistrar du in @import-koden mellan <style>....</style> taggarna.
  5. I koden för e-postens brödtext lägger du till det anpassade teckensnittet i inline-stil.
  6. Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.

Använd ett Google Font i en CTA (legacy)

  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. I textrutan klistrar du in Googles kod för att ställa in CSS-regler för det teckensnittet.
  6. Klicka på Nästa längst ned till höger. Klicka sedan på Spara.

Använd ett Google Font i ett formulär

  1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
  2. Håll muspekaren över namnet på formuläret och klicka på Åtgärder > Redigera formulär eller Skapa ett nytt formulär.
  3. I formuläret klickar du på fliken Stil och förhandsgranskning.
  4. Klicka på avsnittet Stil i menyn i vänster sidofält.
  5. I avsnittet Text klickar du på rullgardinsmenyn Teckensnittsfamilj och väljer ett Google-teckensnitt.
  6. Klicka på Uppdatera eller Publicera längst upp till höger för att ta dina ändringar i bruk.

Använda ett Google Font i en anpassad modul

Observera: Google Fonts är inte tillgängliga för anpassade moduler som används i mallar för e-post.


  1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  2. Öppna den anpassade modulen i sökaren till vänster. Läs mer om hur duskapar en anpassad modul.
  3. I inspektören till höger klickar dupå rullgardinsmenyn Lägg till fält i avsnittet Fält och väljer Font. Läs mer om hur du arbetar med teckensnittsfält.

    click-add-field
  4. Klicka på Publicera ändringar längst upp till höger för att ta dina ändringar i bruk.

  5. Navigera till ditt innehåll:

    • Sidor påwebbplatsen: 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å det innehåll som använder den anpassade modulen.
  7. Klicka på den anpassade modulen i redigeraren för innehåll.
  8. I sidofältsredigeraren klickar du på rullgardinsmenyn Font-fält och väljer en Google Font.

Använd egna teckensnitt

Som ett alternativ till att använda vanliga webbteckensnitt eller ett bibliotek som Google Fonts kan du ladda upp filer med teckensnitt och sedan använda dem i teman eller referera till dem i stilmallar.

Använd egna teckensnitt i teman

I temaredigeraren kan du ladda upp ett anpassat teckensnitt och sedan använda det teckensnittet på sidor och i inlägg. Filer med teckensnitt 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 artiklar i kunskapsbasen.

  1. Navigera till ditt innehåll:

    • Sidor på webbplatsen: 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 redigeraren för innehåll klickar du på menyn Redigera och väljer Tema: [Namn på tema].
  4. I menyn till vänster i sidofältet klickar du på en rullgardinsmeny för teckensnitt och väljer Hantera teckensnitt för varumärkesprofilering.
  5. Följ stegen i denna artikel i Kunskapsbasen för att lägga till eller redigera dina teckensnitt.

Ladda upp anpassade teckensnitt för artiklar i Kunskapsbas

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

  1. I ditt HubSpot-konto navigerar du till Service > Kunskapsbas.
  2. Klicka på mallen Customize uppe till höger.
  3. Klicka på fliken Design i det vänstra sidofältet.
  4. Klicka på Typsnitt i den vänstra sidofältet.
  5. Klicka på rullgardinsmenyn för valfritt teckensnitt och välj Hantera varumärkesprofilering.
  6. Följ stegen i denna artikel i Kunskapsbasen 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 egna teckensnitt i formatmallar

Som ett alternativ till att använda standardwebbtypsnitt eller ett bibliotek med typsnitt som Google Fonts kan du hosta filer med typsnitt i verktyget Filer och sedan referera till dem i din formatmall.

Observera: anpassade teckensnitt är endast tillgängliga på konton med tillgång till designhanteraren och måste tillämpas med CSS. Om du lägger till ett anpassat teckensnitt läggs inte teckensnittet till i rullgardinsmenyerna för styling i redigeraren för innehåll.

Om du vill använda ett teckensnitt i innehåll laddar du upp teckensnittets filer till filverktyget. Vi rekommenderar att du laddar upp minst .woff-, .ttf- och .eot-versioner av teckensnittet för att säkerställa att ditt teckensnitt laddas i alla webbläsare. Du kan använda expertläget i Font Squirrels konverteringsverktyg för att generera ytterligare filformat.

  1. I ditt HubSpot-konto navigerar du till Innehåll > Filer.
  2. Klicka på Ladda upp filer.
  3. Markera filerna med teckensnitt på datorns hårddisk och klicka sedan på Öppna.
  4. Klicka på namnet på en uppladdad fil med teckensnitt.
  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ända ett eget typsnitt i en formatmall

När du har lagt till ett anpassat typsnitt i verktyget Filer 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 stilmallar 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:
    • Ö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 your_font_file.xxx? med URL:en från verktyget för filer. 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 eller Publicera längst upp till höger för att ta dina ändringar i bruk.

sample-custom-font-in-stylesheet

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 standardwebbtypsnitt i e-post. Men om du vill lägga till ett anpassat teckensnitt i en mall för e-post med kundkod kan du göra det när du har lagt till det anpassade teckensnittet i verktyget Filer.

  1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  2. Öppna den specialkodade 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 Your Font Name med namnet på teckensnittet.
    • Ersätt your_font_file.xxx? med URL:en från verktyget för filer. Upprepa för varje filformat.
  1. I koden för e-postens brödtext lägger du till det anpassade teckensnittet i inline-stil.
  2. Klicka på Uppdatera eller Publicera längst upp till höger för att ta dina ändringar i bruk.

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
      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.
      6. Klicka på rullgardinsmenyn Primärt teckensnitt och välj ditt anpassade teckensnitt.
      7. Fortsätt skapa din CTA.

 

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

På samma sätt som med CTA:er kan du efter att ha laddat upp en fil med ett anpassat formulär 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 den här koden i textrutan:

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

set-custom-font-for-cta

Använda ett anpassat teckensnitt i en anpassad modul

När du har lagt till ett anpassat teckensnitt i verktyget Filer kan du använda det i moduler för anpassade bloggar eller sidor. Läs om hur du lägger till ett anpassat teckensnitt i en mall för e-post med anpassad kod.

  1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
  2. Öppna den anpassade modulen isökaren.
  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 Your Font Name med namnet på teckensnittet.
  2. Ersätt your_font_file.xxx? med URL:en från verktyget för filer. 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 ändringar längst upp till höger för att ta dina ändringar i bruk.

custom-module-custom-font
Hjälpte artikeln?
Detta formulär används endast för dokumentationsfeedback. Få reda på hur du får hjälp med HubSpot.
Innehållsförteckning Meny

Relaterat innehåll

New call-to-action