Gå til innhold
Merk:: Denne artikkelen er oversatt av praktiske årsaker. Oversettelsen opprettes automatisk ved hjelp av oversettingsprogramvare, og det er ikke sikkert at den er korrekturlest. Den engelske versjonen av denne artikkelen skal regnes som den regjerende versjonen med den nyeste informasjonen. Du finner den her.

Bruk skrifttyper i HubSpot

Sist oppdatert: september 12, 2023

Gjelder for:

Alle produkter og planer

Hvilke skrifttyper som er tilgjengelige for innhold i HubSpot, avhenger av innholdstypen og skrifttypen. Visse standardfonter er tilgjengelige i alle innholdsredigerere, mens nettfonter (som Google Fonts) og egendefinerte fonter har flere begrensninger, som beskrevet nedenfor:

Innholdstype Skrifttype
Standard skrifttyper Nettskrifttyper

Tilpassede skrifttyper
Side - startmaler ✓ Tilgjengelig i fanenStiler i innholdsredigeringsprogrammet Ikke tilgjengelig
Side - temamaler ✓ Tilgjengelig i temainnstillinger og via stilark Tilgjengelig via stilark
Side - kodet mal ✓ Tilgjengelig via stilark eller tilpasset modul Tilgjengelig via stilark
Blogg ✓ Tilgjengelig via stilark eller tilpasset modul Tilgjengelig via stilark
E-post Noen standardfonter er ikke tilgjengelige i dra-og-slipp-redigeringsprogrammet for e-post. Kun tilgjengelig for egendefinerte e-postmaler; støttes ikke i de fleste e-postklienter. Kun tilgjengelig for egendefinerte e-postmaler; støttes ikke i de fleste e-postklienter.
Kunnskapsbase ✓ Tilgjengelig i Design-fanen i malredigeringsprogrammet Ikke tilgjengelig
Tilpasset modul ✓ Tilgjengelig for egendefinerte moduler som ikke brukes i e-poster Tilgjengelig for egendefinerte moduler som ikke brukes i e-poster
CTA (eldre) ✓ ✓ ✓

Vær oppmerksom på at ikke alle innholdstyper er tilgjengelige i alle kontoer. Hvilke innholdstyper som er tilgjengelige for abonnementene i HubSpot-kontoen din, finner du i produkt- og tjenestekatalogen .

Bruk standard skrifttyper

Standardfonter kan brukes i alle typer innhold og er utformet for å kunne lastes inn på de fleste plattformer og enheter.

  • Naviger til innholdet ditt:

    • Nettstedets sider: Naviger til Markedsføring > Nettsted > Nettstedssider i HubSpot-kontoen din.
    • Landingssider: Naviger til Markedsføring > Landingssider i HubSpot-kontoen din.
    • Blogg: Naviger til Markedsføring > Nettsted > Blogg i HubSpot-kontoen din.
    • Kunnskapsbase: Naviger til Service > Kunnskapsdatabase i HubSpot-kontoen din.
    • E-post: Naviger til Markedsføring > E-post i HubSpot-kontoen din.
  • Hold musepekeren over innholdet, og klikk på Rediger.
  • Klikk på en rik tekst-modul i innholdsredigeringsprogrammet, og marker deretter teksten du vil redigere.
  • Klikk på rullegardinmenyen Font i verktøylinjen for rik tekst, og velg en font. Følgende skrifttyper er tilgjengelige i rik tekst-moduler:

    • Andale Mono*

    • Arial

    • Book Antiqua* Book Antiqua* Courier New

    • Courier New

    • Georgia

    • Helvetica

    • Impact

    • Lato** Merriweather
    • Merriweather
    • Monaco

    • Symbol

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Ikke tilgjengelig i dra-og-slipp-redigeringsprogrammet for e-post.

**Kun tilgjengelig som nettfont i dra-og-slipp-redigeringsprogrammet for e-post.

Bruk nettfonter

Webfonter er tilgjengelige som standard i innholdsredigeringsprogrammet for sider som bruker startmaler og -temaer, samt artikler i kunnskapsbasen og egendefinerte moduler.

Hvis du er utvikler, kan du også bruke fontfeltet til å legge til webfonter i temaer og egendefinerte moduler. Når de brukes på disse måtene, lastes ikke nettfonter inn fra en tredjepartstjeneste; HubSpot laster dem i stedet inn direkte på innholdets domene.

Merk: Nettfonter kan ikke velges i nedtrekksmenyen for skrifttyper i redigeringsprogrammet for rik tekst.

Du kan også bruke tredjepartstjenester som Google Fonts ved å kopiere fontens importkode, lime den inn i innholdets stilark og deretter bruke fonten via CSS:

  • Gå til fonts.google.com.
  • Skriv inn et skriftnavn i søkefeltet.
  • Klikk på fontnavnet for å se en liste over tilgjengelige stiler som kan importeres.
  • Ved siden av hver stil du vil importere, klikker du på + Velg denne stilen.
  • I høyre panel velger du @import i delen Bruk på nettet .
  • Kopier skrifttypens kode:
    • I delen Bruk på nettet kopierer du @import-koden uten <style>-taggen.
    • I feltet CSS-regler for å angi familier kopierer du koden for å angi CSS-regler.

copy-google-font

Når du har koden fra Google Fonts, kan du legge til fonten i HubSpot-innholdet ditt:

Bruke en Google-skrifttype i et stilark

  • Kopier fontens @import-kode fra Google Fonts.
  • Naviger til Markedsføring > Filer og maler > Designverktøy i HubSpot-kontoen din.
  • Åpne stilarket som brukes til innholdet ditt i søkeren.
  • Lim inn @import-koden i linje 1 i stilarket.
  • Legg til koden for å angi CSS-regler i de aktuelle velgerne i stilarket.
  • Klikk på Publiser endringer øverst til høyre for å aktivere endringene.
add-google-fonts-imported-font-to-stylesheet

Bruk en Google-skrifttype i en e-postmal med egendefinert kode

Selv om Google Fonts støttes av Apple Mail og noen få andre e-postklienter, er støtten begrenset, og de fleste populære e-postklienter støtter bare standard webfonter. Finn ut mer om hvordan du velger standard skrifttyper som brukes i det klassiske e-postredigeringsprogrammet.
Egendefinerte, kodede e-postmaler er bare tilgjengelige i kontoer med et Marketing Hub Professional-abonnement eller Enterprise-abonnement.
Slik legger du til en Google Font i en egendefinert e-postmal:
  • Kopier fontens @import-kode fra Google Fonts.
  • Naviger til Markedsføring > Filer og maler > Designverktøy i HubSpot-kontoen din.
  • Åpne den egendefinerte e-postmalen i søkeren.
  • I<head> -delen av malen limer du inn @import-koden mellom <style>....</style> -taggene.
  • I koden til e-postteksten legger du til den egendefinerte skrifttypen i inline-styling.
  • Klikk på Publiser endringer øverst til høyre for å aktivere endringene.

Bruk en Google-skrifttype i en CTA (eldre)

  • Kopier Googles kode for å angi CSS-regler for skrifttypen.
  • Naviger til Markedsføring > Leadoppfanging > CTA-er i HubSpot-kontoen din.
  • Hold musepekeren over en CTA, og klikk deretter på Handlinger > Rediger.
  • Klikk på Avanserte alternativer i panelet til høyre.
  • I tekstboksen limer du inn Googles kode for å angi CSS-regler for skrifttypen.
  • Klikk på Neste nederst til høyre. Klikk deretter på Lagre.

Bruk en Google-skrifttype i et skjema

  • Naviger til Markedsføring > Leadoppfanging > Skjemaer i HubSpot-kontoen din.
  • Hold musepekeren over skjemanavnet og klikk på Handlinger > Rediger skjema eller Opprett et nytt skjema.
  • I skjemaredigeringsprogrammet klikker du på fanen Stil og forhåndsvisning.
  • Klikk på delen Stil i menyen til venstre.
  • I Tekst-delen klikker du på rullegardinmenyen Font family og velger en Google Font.
  • Klikk på Oppdater eller Publiser øverst til høyre for å aktivere endringene.

Bruke en Google-skrifttype i en egendefinert modul

Merk: Google Fonts er ikke tilgjengelig for egendefinerte moduler som brukes i e-postmaler.


  • Naviger til Markedsføring > Filer og maler > Designverktøy i HubSpot-kontoen din.

click-add-field

  • Klikk på Publiser endringer øverst til høyre for å aktivere endringene.

  • Naviger til innholdet ditt:

    • Nettstedets sider: Naviger til Markedsføring > Nettsted > Nettstedssider i HubSpot-kontoen din.
    • Landingssider: Naviger til Markedsføring > Landingssider i HubSpot-kontoen din.
    • Blogg: Naviger til Markedsføring > Nettsted > Blogg i HubSpot-kontoen din.
  • Hold musepekeren over innholdet som bruker den egendefinerte modulen, og klikk på Rediger.
  • Klikk på den egendefinerte modulen i innholdsredigeringsprogrammet.
  • I sidefeltredigeringsprogrammet klikker du på rullegardinmenyen for skrifttypefeltet og velger en Google-skrifttype.

Bruk egendefinerte skrifttyper

Som et alternativ til å bruke standard webfonter eller et fontbibliotek som Google Fonts, kan du være vert for fontfiler i filverktøyet og deretter referere til dem i stilarket.

Væroppmerksom på at egendefinerte skrifttyper bare er tilgjengelige i kontoer med tilgang til designadministratoren og må brukes med CSS. Hvis du legger til en egendefinert font, legges ikke fonten til i rullegardinmenyene i innholdsredigeringsprogrammet.

Hvis du vil bruke en font i innhold, laster du opp fontens filer til filverktøyet. HubSpot anbefaler at du laster opp minst .woff-, .ttf- og .eot-versjonene av skrifttypen for å sikre at den kan lastes inn i alle nettlesere. Du kan bruke ekspertmodus i Font Squirrels konverteringsverktøy for å generere flere filformater.

  • Naviger til Markedsføring > Filer og maler > Filer i HubSpot-kontoen din.
  • Klikk på Last opp filer.
  • Velg skriftfilene på datamaskinens harddisk, og klikk deretter på Åpne.
  • Klikk på navnet på en opplastet skrifttypefil.
  • I panelet til høyre klikker du på Kopier URL for å kopiere URL-adressen der filen ligger. Du trenger URL-adressen for skriften i hvert filformat.

Bruke en egendefinert skrifttype i et stilark

Når du har lagt til en tilpasset font i filverktøyet, kan du referere til den i et stilark. Hver skriftstil (kursiv, fet osv.) krever en egen @font-face-regel. Les mer om hvordan du arbeider med stilark i HubSpot.

  • Naviger til Markedsføring > Filer og maler > Designverktøy i HubSpot-kontoen din.
  • Åpne stilarket som brukes til innholdet ditt i søkeren.
  • For hver skriftstil:
    • Lim inn følgende kode øverst i stilarket:
@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');}
    • Erstatt Your Font Name med navnet på skrifttypen.
    • Erstatt your_font_file.xxx? med URL-adressen fra filverktøyet. Gjenta for hvert filformat.
  • Opprett CSS-regler med font-family-egenskapen for å bruke den tilpassede skrifttypen.
  • Klikk på Oppdater eller Publiser øverst til høyre for å aktivere endringene.

sample-custom-font-in-stylesheet

Bruke en egendefinert skrifttype i en egendefinert kodet e-postmal

De fleste populære e-postklienter støtter ikke egendefinerte skrifttyper. For å sikre en konsekvent opplevelse for leserne, anbefales det å bruke standard nettfonter i e-poster. Hvis du ønsker å legge til en egendefinert skrifttype i en egendefinert kodet e-postmal, kan du gjøre det når du har lagt til den egendefinerte skrifttypen i filverktøyet.

  • Naviger til Markedsføring > Filer og maler > Designverktøy i HubSpot-kontoen din.
  • Åpne den egendefinerte e-postmalen i søkeren.
  • For hver skrifttype:
    • Lim inn denne koden mellom <style>....</style>-taggene i <head>-delen av malen:
@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');}
    • Erstatt Your Font Name med navnet på skrifttypen.
    • Erstatt your_font_file.xxx? med URL-adressen fra filverktøyet. Gjenta for hvert filformat.
  • I koden til e-postteksten legger du til den egendefinerte skrifttypen i inline-styling.
  • Klikk på Oppdater eller Publiser øverst til høyre for å aktivere endringene.

Bruk en tilpasset skrifttype i en CTA (eldre)

Når du har lagt til en tilpasset skrifttype i filverktøyet, kan du bruke den i eldre CTA-er:

  • Naviger til Markedsføring > Leadoppfanging > CTA-er i HubSpot-kontoen din.
  • Hold musepekeren over en CTA, og klikk deretter på Handlinger > Rediger.
  • Klikk på Avanserte alternativer i panelet til høyre.
  • Lim inn denne koden i tekstboksen:

font-family: 'Your Font Name';

  • Erstatt Your Font Name med navnet på skrifttypen.
  • Klikk på Neste nederst til høyre. Klikk deretter på Lagre.

set-custom-font-for-cta

Bruke en egendefinert skrifttype i en egendefinert modul

Når du har lagt til en egendefinert skrifttype i filverktøyet, kan du bruke den i egendefinerte blogg- eller sidemoduler. Finn ut hvordan du legger til en egendefinert skrifttype i en egendefinert e-postmal.

  • Naviger til Markedsføring > Filer og maler > Designverktøy i HubSpot-kontoen din.
  • Åpne den egendefinerte modulen i søkeren.
  • Lim inn følgende kode i module.css-delen:
@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');}
  • Erstatt Your Font Name med navnet på skrifttypen.
  • Erstatt your_font_file.xxx? med URL-adressen fra filverktøyet. Gjenta for hvert filformat.
  • Opprett CSS-regler med font-family-egenskapen for å bruke den tilpassede skrifttypen.
  • Klikk på Publiser endringer øverst til høyre for å aktivere endringene.

custom-module-custom-font
Var denne artikkelen nyttig?
Dette skjemaet brukes kun for tilbakemeldinger om dokumentasjon. Se hvordan du kan få hjelp med HubSpot.
/no/website-pages/use-fonts-in-hubspot