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 skrifter i HubSpot

Sist oppdatert: oktober 3, 2024

Gjelder for:

Alle produkter og planer

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

Innholdstype Skrifttype
Standard skrifttyper Nettfonter

Tilpassede skrifter
Side - temamaler ✓ Tilgjengelig i temainnstillinger og via stilark ✓
Side - kodet mal ✓ Tilgjengelig via stilark eller egendefinert modul Tilgjengelig via stilark
Blogg ✓ Tilgjengelig via stilark eller egendefinert modul ✓
E-post Noen standardfonter er ikke tilgjengelige i dra-og-slipp-e-postredigeringsprogrammet 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-post Tilgjengelig for egendefinerte moduler som ikke brukes i e-post
CTA (eldre) ✓ ✓ ✓
CTA ✓ ✓ ✓

Merk: Ikke alle innholdstyper er tilgjengelige i alle kontoer. Innholdstypene som er tilgjengelige for abonnementene i HubSpot-kontoen din, finner du i Produkt- og tjenestekatalogen.

Bruk standardfonter

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

  • Naviger til innholdet ditt:

    • Nettsider: 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.
  • Klikk på navnet på innholdet ditt.
  • Klikk på en rik tekst-modul i innholdsredigeringsprogrammet, og marker deretter teksten du vil redigere.
  • I verktøylinjen for rik tekst klikker du på nedtrekksmenyen Font og velger en skrifttype. Følgende skrifttyper er tilgjengelige i rik tekst-moduler:

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*

    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Ikke tilgjengelig i dra-og-slipp-e-postredigeringsprogrammet.

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

Bruk nettfonter

Nettfonter 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 nettfonter i temaer og egendefinerte moduler. Når du bruker webfonter på disse måtene, lastes de ikke inn fra en tredjepartstjeneste; HubSpot vil i stedet laste dem inn direkte på innholdets domene.

Merk: Nettfonter kan ikke velges i nedtrekksmenyen for fonter 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å skriftnavnet for å vise en liste over stiler som er tilgjengelige for import.
  • Klikk på + Velg denne stilen ved siden av hver stil du vil importere
  • I høyre panel velger du @import i delen Bruk på nettet.
  • Kopier fontens 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 skriften i HubSpot-innholdet ditt:

Bruk en Google Font i et stilark

  • Kopier fontens @import-kode fra Google Fonts.
  • Gå til Innhold > Design Manager i HubSpot-kontoen din.
  • Åpne stilarket som brukes for 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 å ta endringene i bruk.
add-google-fonts-imported-font-to-stylesheet

Bruk en Google Font i en tilpasset kodet e-postmal

Selv om Google Fonts støttes av Apple Mail og noen få andre e-postklienter, er den brede støtten begrenset, og de fleste populære e-postklienter støtter bare standard nettfonter. Finn ut mer om hvordan du velger standardfonter som brukes i det klassiske e-postredigeringsprogrammet.
Egendefinerte e-postmaler er bare tilgjengelige i kontoer med et Marketing Hub Professional eller Enterprise-abonnement.
Slik legger du til en Google Font i en tilpasset kodet 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.
  • Lim inn @import-koden mellom <style>....</style> -taggene i<head> -delen av malen.
  • Legg til den egendefinerte skrifttypen i inline-styling i koden for e-postteksten.
  • Klikk på Publiser endringer øverst til høyre for å ta endringene i bruk.

Bruk en Google Font i en CTA (eldre)

  • Kopier Googles kode for å angi CSS-regler for den aktuelle skrifttypen.
  • Gå til Markedsføring > CTA-er i HubSpot-kontoen din.
  • Hold markøren over en CTA, og klikk deretter på Handlinger > Rediger.
  • Klikk på Avanserte alternativer i høyre panel.
  • Lim inn Googles kode for å angi CSS-regler for den aktuelle skrifttypen i tekstboksen.
  • Klikk på Neste nederst til høyre. Klikk deretter på Lagre.

Bruk en Google Font 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.
  • Klikk på fanen Stil og forhåndsvisning i skjemaredigeringsprogrammet.
  • Klikk på Stil i menyen til venstre.
  • I Tekst-delen klikker du på rullegardinmenyen Fontfamilie og velger en Google Font.
  • Klikk på Oppdater eller Publiser øverst til høyre for å ta endringene i bruk.

Bruk en Google Font i en egendefinert modul

Merk: Google Fonts er ikke tilgjengelige 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 å ta endringene i bruk.

  • Naviger til innholdet ditt:

    • Nettsider: 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.
  • Klikk på navnet på innholdet som bruker den egendefinerte modulen.
  • Klikk på den egendefinerte modulen i innholdsredigeringsprogrammet.
  • Klikk på rullegardinmenyen Font-feltet i sidefeltredigeringsprogrammet , og velg en Google Font.

Bruk egendefinerte skrifttyper

Som et alternativ til å bruke standard nettfonter eller et fontbibliotek som Google Fonts, kan du laste opp fontfiler og bruke dem i temaer eller referere til dem i stilark.

Bruk egendefinerte skrifter 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 skrifter

  • Naviger til innholdet ditt:

    • Nettsider: 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.
  • Klikk på navnet på innholdet ditt.
  • I innholdsredigeringsprogrammet klikker du på Rediger-menyen og velger Tema: [Navn på tema].
  • Klikk på en skrifttype i rullegardinmenyen i venstre sidefelt, og velg Last opp en tilpasset skrifttype.
  • I det høyre panelet skriver du inn en etikett for skriften i feltet Fontnavn .
  • Klikk på Choose font files og velg en eller flere skriftfiler, og klikk deretter på Next.

add-a-custom-font-to-theme

  • Klikk på rullegardinmenyen Font Style 1 , og velg den stilen som brukes i skriftfilen. Hver stil må bruke en egen skriftfil.
  • Hvis du vil legge til flere skriftstiler, klikker du på + Legg til en annen skriftstil og legger deretter til skriftstilene dine. Hver opplastet skriftfil må ha minst én tilknyttet stil.
  • Når du har lagt til alle aktuelle skriftstiler, klikker du på Ferdig.

Rediger egendefinerte skrifter

Når du har lastet opp en egendefinert skrift i temaredigeringsprogrammet, kan du laste opp flere skrifter, tilpasse eksisterende skrifter med flere skriftstiler eller slette skrifter.

  • Naviger til innholdet ditt:

    • Nettsider: 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.
  • Klikk på navnet på innholdet ditt.
  • I innholdsredigeringsprogrammet klikker du på Rediger-menyen og velger Tema: [Navn på tema].
  • I menyen til venstre klikker du på for å utvide delen Skrifttyper .
  • Klikk på rullegardinmenyen font og velgManage custom fonts.
  • Hvis du vil legge til en ny skrift, klikker du på Legg til en egendefinert skrift i dialogboksen.
  • Slik redigerer du en skrifttype:
    • I dialogboksen klikker du på rullegardinmenyen Handlinger ved siden av skriften, og velger Rediger.
    • Hvis du vil endre navnet på skriften, klikker du på Rediger ved siden av navnet på skriften og skriver inn et nytt navn.
    • Hvis du vil legge til flere skriftstiler, klikker du på Legg til en annen skriftstil, klikker på rullegardinmenyen Skriftstil og velger en stil. Klikk på Last opp, og last deretter opp en skriftfil.
    • Hvis du vil slette en skrifttype, klikker du på deletededel sletteikonet ved siden av skrifttypen. Du kan ikke slette en skrifttype hvis det ikke finnes noen andre skrifttyper i listen.
    • Klikk på Lagre.
  • Hvis du vil slette en skrifttype, klikker du på nedtrekksmenyen Handlinger i dialogboksen og velger Slett.

Merk: Hvis du sletter en skrifttype, fjernes den fra alle rullegardinmenyene, men skriftfilene blir liggende 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 nettfonter eller et fontbibliotek som Google Fonts, kan du hoste fontfiler i filverktøyet og deretter referere til dem i stilarket ditt.

Merk: Egendefinerte skrifter er bare tilgjengelige i kontoer med tilgang til designadministratoren, og må brukes med CSS. Hvis du legger til en egendefinert skrifttype, vil ikke skriften legges til i nedtrekksmenyene i innholdsredigeringsprogrammet.

Hvis du vil bruke en skrifttype i innhold, laster du opp skrifttypens filer til filverktøyet. Det anbefales å laste opp minst .woff-, .ttf- og .eot-versjoner av skriften for å sikre at skriften lastes inn i alle nettlesere. Du kan bruke ekspertmodus på 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 skriftfil.
  • I høyre panel klikker du på Kopier URL for å kopiere URL-adressen der filen er lagret. Du trenger URL-adressen for skriften i hvert filformat.

Bruk en egendefinert skrifttype i et stilark

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

  • Gå til Innhold > Design Manager i HubSpot-kontoen din.
  • Åpne stilarket som brukes for 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å skriften.
    • 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 egendefinerte skrifttypen.
  • Klikk på Oppdater eller Publiser øverst til høyre for å ta endringene i bruk.

sample-custom-font-in-stylesheet

Bruk en egendefinert skrifttype i en egendefinert kodet e-postmal

Egendefinerte skrifttyper støttes ikke i de fleste populære e-postklienter. For å sikre en konsekvent opplevelse for leserne dine, 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:
    • I <head>-delen av malen limer du inn denne koden mellom <style>....</style>-taggene:
@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å skriften.
    • Erstatt your_font_file.xxx? med URL-adressen fra filverktøyet. Gjenta for hvert filformat.
  • Legg til den egendefinerte skrifttypen i inline-styling i koden for e-postteksten.
  • Klikk på Oppdater eller Publiser øverst til høyre for å ta endringene i bruk.

Bruk en tilpasset skrifttype i en CTA

Når du har lagt til en tilpasset skrifttype i temaet ditt, kan du bruke den med CTA-er:

  • Gå til Markedsføring > CTA-er i HubSpot-kontoen din.
  • Klikk på rullegardinmenyen øverst til venstre, og velg CTAer
  • Hold markøren over en CTA, og klikk deretter på Handlinger > Rediger.
  • Klikk på Design-fanen i venstre panel i CTA-redigeringsprogrammet.
  • Klikk på Stil-delen for å utvide den.
  • Klikk på rullegardinmenyen Primary Font , og velg den egendefinerte skrifttypen.
  • Fortsett å lage CTA-en din.

Bruk en egendefinert skrifttype i en CTA (eldre)

På samme måte som med CTA-er kan du bruke en egendefinert skjemafil med eldre CTA-er etter at du har lastet den opp:

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

font-family: 'Your Font Name';

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

set-custom-font-for-cta

Bruk en egendefinert skrifttype i en egendefinert modul

Når du har lagt til en egendefinert skrift i filverktøyet, kan du bruke den i egendefinerte blogg- eller sidemoduler. Finn ut hvordan du legger til en egendefinert skrifttype i en egendefinert kodet 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å skriften.
  • 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 egendefinerte skrifttypen.
  • Klikk på Publiser endringer øverst til høyre for å ta endringene i bruk.

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

Relatert innhold