Hoppa till innehåll
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 teckensnitt i HubSpot

Senast uppdaterad: oktober 27, 2023

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

Alla produkter och planer

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.

copy-google-font

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

  • 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.
add-google-fonts-imported-font-to-stylesheet

Använd ett Google-teckensnitt i en anpassad e-postmall

Google Fonts stöds av Apple Mail och några andra e-postklienter, men det breda stödet är begränsat och de flesta populära e-postklienter stöder endast standardwebbteckensnitt. Läs mer om hur du väljer de standardteckensnitt som används i den klassiska e-postredigeraren.
Anpassade kodade e-postmallar är endast tillgängliga i konton med en Marketing Hub Professional eller Enterprise-prenumeration.
Så här lägger du till ett Google Font i en e-postmall med anpassad kod:
  • 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.

click-add-field

  • 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.

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 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.

set-custom-font-for-cta

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.

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.