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

Använd teckensnitt i HubSpot

Senast uppdaterad: april 20, 2022

Gäller för:

Alla produkter och planer

Vilka typsnitt som är tillgängliga för innehåll i HubSpot beror på innehållstyp och typsnittstyp. Vissa standardtypsnitt är tillgängliga i alla innehållsredigerare, medan Google Fonts och anpassade typsnitt har ytterligare begränsningar som beskrivs nedan:

Typ av innehåll Typsnitt
Standardtypsnitt Google Fonts

Anpassade typsnitt

Sida - startmallar Finns på flikenDesign i innehållsredigeraren Inte tillgänglig
Sida - temamallar Tillgänglig i temainställningar och via formatmall Tillgänglig via formatmall
Sida - kodad mall Tillgänglig via formatmall eller anpassad modul Tillgänglig via formatmall
Blogg Tillgänglig via formatmall eller anpassad modul Tillgänglig via formatmall
E-post Vissa standardtypsnitt är inte tillgängliga i e-postredigeraren för dra och släpp-meddelanden. Endast tillgänglig för anpassade kodade e-postmallar; stöds inte av de flesta e-postklienter. Endast tillgänglig för anpassade kodade e-postmallar; stöds inte av de flesta e-postklienter.
Kunskapsbas Finns påfliken Designi mallredigeraren Inte 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

Observera att alla innehållstyper inte är tillgängliga för alla konton.De innehållstyper som är tillgängliga för prenumerationerna i ditt HubSpot-konto finns i produkt- och tjänstekatalogen.

Använd standardtypsnitt

Standardtypsnitt kan användas i alla typer av innehåll och är utformade för att laddas 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.
    • 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.
  • I innehållsredigeraren klickar du på enmodul för rik text och markerar sedan den text som du vill redigera.
  • Klicka på rullgardinsmenynTeckensnitti verktygsfältet för rik text och välj ett teckensnitt. Följande typsnitt är tillgängliga i textmoduler:
    • Andale Mono*

    • Arial

    • Bok Antiqua*

    • Courier Ny

    • Georgien

    • Helvetica

    • Effekt*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

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

**Endast tillgängligt som webbtypsnitt i e-postredigeraren med dra och släpp-principen.

Använd Google Fonts

Google Fonts är tillgängliga i innehållsredigeraren för sidor som använder startmallar och teman, samt kunskapsbasartiklar och anpassade moduler. Om du vill använda ett Google-teckensnitt på andra sidor måste du kopiera teckensnittets importkod, klistra in den i sidans formatmall och sedan tillämpa teckensnittet med CSS-regler.

Läs mer om hur utvecklare kan använda teckensnittsfält för att lägga till Google Fonts i teman och anpassade moduler i HubSpots dokumentation för utvecklare.

Observera: Google Fonts kan inte väljas i rullgardinsmenyn för teckensnitt i redigeringsverktyget för rik text.

  • Gå till fonts.google.com.
  • Ange ettteckensnittsnamn i sökfältet.
  • Klicka på teckensnittsnamnet för att visa en lista över stilar som kan importeras.
  • Bredvid varje stil som du vill importera klickar du på + Välj den här stilen.
  • I den högra panelen väljer du@importi avsnittetAnvänd på webben.
  • Kopiera teckensnittets kod:
    • I avsnittet Använd på webben kopierar du @import-koden utan <style>-taggen.
    • I fältetCSS-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 en Google Font i ett formatmallblad

  • Kopiera teckensnittets @importkod från Google Fonts.
  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
  • Öppna formatmallarna som används för ditt innehåll i sökaren.
  • Klistra in @import-koden på rad 1 i formatmallen.
  • Lägg till koden för att ställa in CSS-regler till lämpliga selektorer i formatmallarna.
add-google-fonts-imported-font-to-stylesheet
  • Klicka påPublicera ellerUppdaterai det övre högra hörnet för att ta ändringarna i bruk.

Använda en Google Font 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-postklienter stöder endast standardwebbtypsnitt. Läs mer om hur du väljer standardtypsnitt som används i den uppdaterade klassiska e-postredigeraren.
Lägg till en Google Font i en anpassad kodad e-postmall:
  • Kopiera teckensnittets @importkod 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.
  • Klistra in @import-koden mellan <style>....</style>-taggarna i avsnittet <head> i mallen.
  • Lägg till det anpassade teckensnittet i koden för e-postkroppen i inline-stilen.
  • Klicka på UppdateraellerPublicera i det övre högra hörnet för att ta ändringarna i bruk.

Använd en Google Font i en CTA

  • Kopiera Googles kod för att ställa in CSS-regler för teckensnittet.
  • I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > CTA.
  • Håll muspekaren över en CTA, klicka sedan på rullgardinsmenyn Åtgärder och väljRedigera.
  • Klicka påAvancerade alternativ i den högra panelen.
  • Klistra in Googles kod för att ställa in CSS-regler för teckensnittet i textrutan.
  • Klicka påNästa längst ner till höger. Klicka sedan på Spara.

Använd en Google Font i ett formulär

  • I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.
  • Håll muspekaren över formulärets namn och klicka på Åtgärder > Redigera formulär eller Skapa ett nytt formulär.
  • Klicka på fliken Stil och förhandsgranskning i formulärredigeraren.
  • Klicka på avsnittetStili den vänstra menyn i sidofältet.
  • I avsnittetTextklickar du på rullgardinsmenynTeckensnittsfamilj och väljer enGoogle Font.
  • Klicka påUppdateraellerPublicera i det övre högra hörnet för att ta ändringarna i bruk.

Använda en Google Font 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 ändringari det övre högra hörnet för att ta ändringarna i bruk.
  • 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.
  • Håll muspekaren över innehållet i den anpassade modulen och klicka påRedigera.
  • Klicka på denanpassade modulen i innehållsredigeraren.
  • Klicka på rullgardinsmenynFontfälteti sidobarredigeraren och välj enGoogle Font.

Använd anpassade typsnitt

Som ett alternativ till att använda vanliga webbtypsnitt eller ett typsnittsbibliotek somGoogle Fonts kan du lägga upp typsnittsfiler i filverktyget och sedan referera till dem i formatmallarna.

Observera:anpassade typsnitt är endast tillgängliga på konton med tillgång till designhanteraren och måste tillämpas med CSS. Om dulägger till ett anpassat typsnitt kommer typsnittetinteatt läggas till i rullgardinsmenyerna i innehållsredigeraren.

Om du vill använda ett typsnitt i innehåll laddar du upp typsnittets filer till filverktyget. HubSpot rekommenderar att du laddar upp minst.woff-, .ttf- och . eot-versionerna av teckensnittet för att se till att teckensnittet laddas i alla webbläsare. Du kan använda expertläget iFont 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.
  • Väljteckensnittsfilerna på datorns hårddisk och klicka sedan påÖppna.
  • Klicka på namnet på en uppladdad typsnittsfil.
  • I den högra panelen klickar du påKopiera URL för att kopiera den URL där filen finns. Du behöver URL:en för teckensnittet i varje filformat.

Använda ett anpassat typsnitt i ett formatmallblad

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

  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
  • Öppna formatmallarna som används för ditt innehåll i sökaren.
  • För varje typsnitt:
    • Klistra in följande kod högst upp i formatmallen:
@font-face { font-family: "Ditt typsnittsnamn"; 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 medteckensnittets namn.
    • Ersättyour_font_file.xxx?med URL:enfrån filverktyget. Upprepa för varje filformat.
  • Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet.
  • Klicka på UppdateraellerPublicera i det övre högra hörnet för att ta ändringarna i bruk.

sample-custom-font-in-stylesheet

Använda ett anpassat typsnitt i en anpassad kodad e-postmall

Anpassade typsnitt stöds inte av de flesta populära e-postklienter. För att säkerställa en enhetlig upplevelse för dina läsare, använda standardtypsnitt för webben i e-postmeddelanden rekommenderas. Men om du vill lägga till ett anpassat typsnitt i en skräddarsydd kodad e-postmall kan du göra det när du har lagt till det anpassade typsnittet 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:
    • Klistra in den här koden mellan <style>....</style>-taggarna i avsnittet <head> i mallen:
@font-face { font-family: "Ditt typsnittsnamn"; 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 medteckensnittets namn.
    • Ersättyour_font_file.xxx?med URL:enfrån filverktyget. Upprepa för varje filformat.
  • Lägg till det anpassade teckensnittet i koden för e-postkroppen i inline-stilen.
  • Klicka på UppdateraellerPublicera i det övre högra hörnet för att ta ändringarna i bruk.

Använd ett anpassat typsnitt i en CTA

När du har lagt till ett anpassat typsnitt i filverktyget kan du använda det i CTA:er:

  • I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > CTA.
  • Håll muspekaren över en CTA, klicka sedan på rullgardinsmenyn Åtgärder och väljRedigera.
  • Klicka påAvancerade alternativ i den högra panelen.
  • Klistra in den här koden i textrutan:

font-family: "Ditt typsnittsnamn";

  • Ersättditt teckensnittsnamnmedteckensnittets namn.
  • Klicka påNästa längst ner till höger. Klicka sedan på Spara.

set-custom-font-for-cta

Använda 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 moduler:

  • 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: "Ditt typsnittsnamn"; 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 medteckensnittets namn.
  • Ersättyour_font_file.xxx?med URL:enfrån filverktyget. Upprepa för varje filformat.
  • Skapa CSS-regler med egenskapen font-family för att tillämpa det anpassade teckensnittet.

custom-module-custom-font

  • Klicka på Publicera ändringar i det övre högra hörnet för att ta ändringarna i bruk.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.