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: 4 juni 2026

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

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

Innan du börjar

Innan du börjar använda teckensnitt i HubSpot bör du gå igenom 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 i alla konton. För att bekräfta vilka innehållstyper som är tillgängliga för ditt abonnemang, se produkt- och tjänstekatalogen.
  • Granska tabellen nedan för att förstå vilka teckensnittsalternativ som är tillgängliga för varje innehållstyp:
Innehållstyp Teckensnittstyp  
  Standardtypsnitt Webbteckensnitt

Anpassade teckensnitt

  
Sida – temamallar ✓ Tillgängligt i temainställningarna och via stilmallen ✓  
Sida – kodad mall ✓ Tillgänglig via stilmall eller anpassad modul Tillgänglig via stilmall  
Blogg ✓ Tillgängligt via stilmall eller anpassad modul ✓  
E-post Vissa standardtypsnitt är inte tillgängliga i e-postredigeraren med dra-och-släpp-funktion Endast tillgängligt för anpassade e-postmallar; stöds inte i de flesta e-postklienter Endast tillgängligt för anpassade 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ängligt för anpassade moduler som inte används i e-postmeddelanden Tillgängligt för anpassade moduler som inte används i e-postmeddelanden  
CTA (äldre version) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

Använd standardteckensnitt i rich text-moduler

Standardteckensnitt stöds i allt HubSpot-innehåll, men de tillgängliga alternativen 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. I verktygsfältet för rik text klickar du pårullgardinsmenyn Teckensnittoch väljer ett teckensnitt. Följande teckensnitt är tillgängliga i moduler för rik text:

Använd webbtypsnitt

Webbtypsnitt stöds i vissa HubSpot-innehåll, men de är inte tillgängliga i rullgardinsmenyn Font i rich text-redigeraren. Beroende på innehållstyp kan webbtypsnitt tillämpas i temainställningar, stilmallar, anpassade moduler eller kodade mallar. 

Utvecklare kan använda teckensnittsfältet för att lägga till webbteckensnitt till teman och anpassade moduler. När webbteckensnitt 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 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. Gå till fonts.google.com.
  2. Ange ettteckensnittsnamn i sökfältet. 
  3. Klicka på teckensnittsnamnet för att visa en lista över stilar som kan importeras.
  4. Klicka på Hämta typsnitt längst upp till höger.
  5. Klicka på Hämta inbäddningskod längst upp till höger.
  6. I den högra kolumnen väljer du @import på fliken Web.
  7. Kopiera @import- koden utan taggen <style>.
  8. KopieraCSS-klasskoden för att ställa in CSS-regler. 

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

Använd ett Google-typsnitt i ett formatmall

  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 det stilark som används för ditt innehåll i Finder.
  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 e-postmall

Google Fonts stöds i Apple Mail och några andra e-postklienter, men det breda stödet är begränsat. De flesta populära e-postklienter stöder endast standardwebbteckensnitt. Läs mer om hur du väljer standardteckensnitt som används 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-typsnitt i en anpassad kodad e-postmall: 

  1. Kopiera typsnittets @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 sökfunktionen.
  4. I avsnittet<head> i mallen klistrar du in @import-koden mellan taggarna <style>....</style>. 
  5. I avsnittet <body> i mallen lägger du till det anpassade typsnittet i inline-styling. 
  6. Klicka på Publicera ändringarlängst upp 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 teckensnittet.
  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 panelen till höger. 
  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 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 > 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 Font. 
  6. Klicka påUppdatera ellerPublicera längst upp till höger för att publicera dina ändringar. 

Använd ett Google-typsnitt i en anpassad modul

Observera: Google-typsnitt är inte tillgängliga 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. I sökaren klickar du på namnet på en anpassad modul. Läs mer om hur du skapar en anpassad modul.
  3. I inspektorn klickar du på rullgardinsmenyn Lägg till fältiavsnittet Fältoch väljer Teckensnitt. Läs mer om att arbeta med teckensnittsfält.
  1. Klicka på Publicera ändringarlängst upp 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 det anpassade modulen. 
  4. I innehållsredigeraren klickar du på denanpassade modulen. 
  5. I sidofältets redigerare klickar du pårullgardinsmenyn i fältet Teckensnittoch väljer ettGoogle-teckensnitt. 

Använda anpassade teckensnitt

Som ett alternativ till att använda standardwebbteckensnitt eller ett teckensnittsbibliotek somGoogle Fonts kan du ladda upp teckensnittsfiler och sedan använda dem i teman eller referera till dem i stilmallar.

Använda anpassade teckensnitt i teman

I temaredigeraren laddar du upp ett anpassat teckensnitt och använder sedan det teckensnittet på sidor och i inlägg. Teckensnittsfiler 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 kunskapsbasartiklar.

  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: [Namn på tema].
  4. I menyn i vänster sidfält klickar du på valfriteckensnittsrullgardinsmeny och väljerHantera varumärkesteckensnitt.
  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 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 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å valfriteckensnittsmeny och väljHantera varumärkesteckensnitt.
  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ända 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. Att lägga till ett anpassat teckensnitt läggerinte till teckensnittet i rullgardinsmenyerna för utformning i innehållsredigeraren.

För att använda ett teckensnitt i innehållet laddar du upp teckensnittsfilerna till filverktyget. Det rekommenderas att ladda upp åtminstone .woff-,.ttf - och .eot-versioner av teckensnittet för att säkerställa att teckensnittet laddas i alla webbläsare. Du kan använda expertläget iFont Squirrels konverteringsverktygför att generera 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. Väljteckensnittsfilerna på datorns hårddisk och klicka sedanpå Öppna.
  4. Klicka på namnet på en uppladdad teckensnittsfil.
  5. I den högra panelen klickar du påKopiera URL 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 en stilmall

När du har lagt till ett anpassat teckensnitt i filverktyget kan du referera till det i en stilmall. Varje teckensnittsstil (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 det stilmall som används för ditt innehåll i sökfunktionen.
  3. För varje typsnittsstil: 
    • 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 typsnittsnamn med namnet på typsnittet.
    • Ersättdin_teckensnittsfil.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 ett e-postmeddelande i e-postredigeraren med dra-och-släpp-funktion

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 webbklienter. För att säkerställa en enhetlig upplevelse för dina läsare rekommenderas att du använder standardteckensnitt i e-postmeddelanden.

Om du ändå vill lägga till ett anpassat typsnitt i ett e-postmeddelande i e-postredigeraren med dra-och-släpp-funktion kan du göra det efter att du har laddat upp ett anpassat typsnitt till ditt varumärkeskit och ställt in ett reservtypsnitt. 

  1. Lägg till ett anpassat typsnitt i ditt varumärkespaket 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 marknadsföringsmejl 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 sidofält.
    • Så här gör du I avsnittet Textstilarklickar du på enrullgardinsmeny ochväljer etttypsnitt iavsnittetAnpassade typsnitt.

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

  1. Skriv e-postmeddelandet och förhandsgranska det i flera e-postklienter.
  2. Slutför och skicka e-postmeddelandet.

Använd ett anpassat typsnitt i en anpassad e-postmall

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

Om du vill lägga till ett anpassat typsnitt i en anpassad e-postmall kan du dock göra det när 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 anpassade e-postmall i Finder.
  3. För varje typsnittsstil:
    • 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 typsnittsnamn med namnet på typsnittet.
    • Ersättdin_teckensnittsfil.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-formatering. 
  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 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 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. I den vänstra panelen i CTA-redigeraren klickar du på fliken Design. 
  5. Klicka på avsnittet Stilar för att expandera det.
  6. Klicka på rullgardinsmenyn Primärt teckensnitt och välj ditt anpassade teckensnitt. 
  7. Fortsätt att skapa din CTA. 

Använd ett anpassat teckensnitt i en CTA (

äldre

version)

Precis som med CTA:er kan du använda ett anpassat teckensnitt med äldre CTA:er efter att du har laddat upp en teckensnittsfil.

  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 den högra panelen. 
  4. Klistra in följande kod i textrutan:

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

Använd ett anpassat typsnitt 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 anpassat typsnitt i en anpassad 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 sökaren.
  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 Ditt typsnittsnamn med namnet på typsnittet.
    • Ersättyour_font_file.xxx? medURL:en från filverktyget. Upprepa för varje filformat.
  2. Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet. 
  3. 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