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: april 3, 2024

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 - temamaler ✓ Tilgjengelig i temainnstillinger og via stilark ✓
Side - kodet mal ✓ Tilgjengelig via stilark eller tilpasset modul Tilgjengelig via stilark
Blogg ✓ Tilgjengelig via stilark eller tilpasset modul ✓
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 slik at de kan lastes inn på de fleste plattformer og enheter.

  • Naviger til innholdet ditt:

    • Nettstedets sider: Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
    • Landingssider: Gå til Innhold > Landingssider i HubSpot-kontoen din.
    • Blogg: Gå til Innhold > Blog i HubSpot-kontoen din.
    • Kunnskapsbase: Gå til Innhold > Kunnskapsbase i HubSpot-kontoen din.
    • E-post: I HubSpot-kontoen din navigerer du til Markedsføring > Markedsførings-e-post.
  • Hold musepekeren over innholdet, og klikk på Rediger.
  • Klikk på en rik tekst-modul i innholdsredigeringsprogrammet, og marker deretter teksten du vil redigere.
  • I verktøylinjen for rik tekst klikker du på rullegardinmenyen Font og velger 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.
  • Gå til Innhold > Design Manager 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

Bruke en Google Font 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.
  • Gå til Innhold > Design Manager 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 Font i en CTA (eldre)

  • Kopier Googles kode for å angi CSS-regler for skrifttypen.
  • Gå til Markedsføring > 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

  • I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
  • 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-seksjonen 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.


  • Gå til Innhold > Design Manager i HubSpot-kontoen din.

click-add-field

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

  • Naviger til innholdet ditt:

    • Nettstedets sider: Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
    • Landingssider: Gå til Innhold > Landingssider i HubSpot-kontoen din.
    • Blogg: Gå til Innhold > Blog 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 laste opp fontfiler og deretter bruke dem i temaer eller referere til dem i stilark.

Bruk egendefinerte skrifttyper i temaer

I temaredigeringsprogrammet kan du laste opp en egendefinert skrifttype og deretter bruke den på sider og i innlegg. Skriftfiler støttes i følgende formater: TTF, OTF, WOFF.

Last opp egendefinerte skrifttyper

  • Naviger til innholdet ditt:

    • Nettstedets sider: Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
    • Landingssider: Gå til Innhold > Landingssider i HubSpot-kontoen din.
    • Blogg: Gå til Innhold > Blog i HubSpot-kontoen din.
  • Hold musepekeren over innholdet, og klikk på Rediger.
  • I innholdsredigeringsprogrammet klikker du på Rediger-menyen og velger Tema: [Navn på tema].
  • I menyen til venstre klikker du på rullegardinmenyen for en skrifttype og velger Last opp en egendefinert skrifttype.
  • I panelet til høyre skriver du inn en etikett for skrifttypen i feltet Fontnavn .
  • Klikk på Velg skriftfiler og velg en eller flere skriftfiler, og klikk deretter på Neste.

add-a-custom-font-to-theme

  • Klikk på rullegardinmenyen Font Style 1 og velg den stilen fontfilen bruker. Du kan velge flere stiler for samme skrifttypefil.
  • Hvis du vil legge til flere skriftstiler, klikker du på + Legg til en annen skriftstil og legger deretter til skriftstilene. Hver opplastede skrifttypefil må ha minst én tilknyttet stil.
  • Når du har lagt til alle aktuelle skriftstiler, klikker du på Ferdig.

Rediger egendefinerte skrifttyper

Når du har lastet opp en tilpasset skrifttype i temaredigeringsprogrammet, kan du laste opp flere skrifttyper, tilpasse eksisterende skrifttyper med flere skriftstiler eller slette skrifttyper.

  • Naviger til innholdet ditt:

    • Nettstedets sider: Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
    • Landingssider: Gå til Innhold > Landingssider i HubSpot-kontoen din.
    • Blogg: Gå til Innhold > Blog i HubSpot-kontoen din.
  • Hold musepekeren over innholdet, og klikk på Rediger.
  • I innholdsredigeringsprogrammet klikker du på Rediger-menyen og velger Tema: [Navn på tema].
  • I menyen til venstre klikker du på Fonts for å utvide delen Fonts .
  • Klikk på rullegardinmenyen for skrifter på og velgAdministrer egendefinerte skrifter.
  • Hvis du vil legge til en ny skrifttype, klikker du på Legg til en egendefinert skrifttype i dialogboksen.
  • Slik redigerer du en skrifttype:
    • I dialogboksen klikker du på rullegardinmenyen Handlinger ved siden av skrifttypen og velger Rediger.
    • Hvis du vil endre navnet på fonten, klikker du på Rediger ved siden av fontnavnet og skriver inn et nytt fontnavn.
    • Hvis du vil legge til flere skriftstiler, klikker du på Legg til en annen skriftstil, klikker deretter på rullegardinmenyen Skriftstil og velger en stil. Klikk på Last opp, og last opp en skrifttypefil.
    • Hvis du vil slette en skrifttype, klikker du påsletteikonet deletededel   ved siden av skrifttypen. Du kan ikke slette en skrifttype hvis det ikke finnes andre skrifttyper i listen.
    • Klikk på Lagre.
  • For å slette en skrifttype klikker du på rullegardinmenyen Handlinger i dialogboksen og velger Slett.

Merk: Hvis du sletter en skrifttype, fjernes den fra alle rullegardinmenyene, men skriftfilene forblir i filverktøyet til de slettes der.


  • Når du er ferdig med å redigere skriftene, klikker du på Ferdig.

Bruk egendefinerte skrifttyper i stilark

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 skrifttype, legges ikke skrifttypen til i rullegardinmenyene i innholdsredigeringsprogrammet.

Hvis du vil bruke en font i innhold, laster du opp fontens filer til filverktøyet. Det anbefales 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.

  • Gå til Bibliotek > 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.

  • Gå til Innhold > Design Manager 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 at leserne får en enhetlig opplevelse, anbefales det å bruke standard nettfonter i e-poster. Hvis du imidlertid ø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.

  • Gå til Innhold > Design Manager 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:

  • Gå til Markedsføring > 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.

  • Gå til Innhold > Design Manager 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.
Innholdsfortegnelse /no/website-pages/use-fonts-in-hubspot

Relatert innhold