Bruk skrifttyper i HubSpot

Skrifttyper i HubSpot er tilgjengelige på ulike måter, avhengig av innholdstype og skrifttypetype. Noen standardskrifttyper er tilgjengelige i alle innholdsredigerere. Det kan være nødvendig å legge til nettfonter og egendefinerte fonter i temainnstillinger, stilark, egendefinerte moduler eller kodede maler.

Før du setter i gang

Før du begynner å bruke skrifttyper i HubSpot, bør du gjennomgå kravene og det du må ta hensyn til.

Forstå begrensninger og hensyn

• Ikke alle innholdstyper er tilgjengelige i alle kontoer. For å finne ut hvilke innholdstyper som er tilgjengelige i abonnementet ditt, kan du gå gjennom produkt & -tjenestekatalogen.
• Gjennomgå tabellen nedenfor for å finne ut hvilke skriftalternativer som er tilgjengelige for hver innholdstype:

Bruk standardskrifter i riktekstmoduler

Standardskrifttyper støttes i alt innhold i HubSpot, men hvilke alternativer som er tilgjengelige og hvor du kan bruke dem, avhenger av innholdstypen.

1. Naviger til innholdet ditt:

   • Nettstedssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Nettstedsside. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Nettstedsside.
   • Landingssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Landingssider. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Landingssider.
   • Blogg: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Blogg. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Blogg.
   • E-post: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > E-post. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > E-post.
2. Klikk på navnet på innholdet ditt.
3. I innholdsredigereren klikker du på enriktekstmodul og markerer deretter teksten du vil redigere. 
4. I verktøylinjen for rik tekst klikker du pårullegardinmenyen«Skrift»og velger en skrift. Følgende skrifttyper er tilgjengelige i riktekstmodulene:

Bruk nettfonter

Webfonter støttes i enkelte HubSpot-innholdstyper, men de er ikke tilgjengelige i nedtrekksmenyen «Font» i riktekstredigereren. Avhengig av innholdstypen kan nettfonter brukes i temainnstillinger, stilark, tilpassede moduler eller kodede maler. 

Utviklere kan bruke skriftfeltet til å legge til nettskrifter i temaer og tilpassede moduler. Når nettfonter legges til på denne måten, laster HubSpot dem inn direkte på innholdets domene i stedet for å hente dem fra en tredjepartstjeneste.

Bruk tjenester fra tredjeparter, for eksempel Google Fonts , ved å kopiere importkoden for skrifttypen, lime den inn i innholdets stilark og deretter bruke skrifttypen via Cascading Style Sheets (CSS):

1. Gå til fonts.google.com.
2. Skriv innnavnet på enskrifttype i søkefeltet. 
3. Klikk på skriftnavnet for å se en liste over stiler som kan importeres.
4. Klikk på «Hent skrift» øverst til høyre.
5. Klikk på «Hent innebyggingskode» øverst til høyre.
6. I høyre kolonne velger du @import på fanen «Web ».
7. Kopier @import- koden uten <style> -taggen.
8. Kopierkoden forCSS-klassen for å angi CSS-regler. 

9. Når du har kopiert koden fra Google Fonts, kan du legge til skrifttypen i HubSpot-innholdet ditt: 

• • Bruk en Google-skrift i et stilark
  • Bruk en Google Font i en e-postmal med egenkode
  • Bruk en Google-skrift i en call-to-action (eldre versjon)
  • Bruk en Google-skrift i et skjema
  • Bruk en Google-skrift i en tilpasset modul

Bruk en Google-skrift i et stilark

1. Kopier @import-koden for skrifttypen fra Google Fonts.
2. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
3. Åpne stilarket som brukes til innholdet ditt i Finder.
4. Lim inn @import-koden i linje 1 i stilarket. 
5. Legg inn koden for å angi CSS-regler for de aktuelle selektorene i stilarket.
6. Klikk på«Publiser endringer » øverst til høyre for å publisere endringene dine. 

Bruk en Google Font i en e-postmal med egen koding

Google Fonts støttes i Apple Mail og noen få andre e-postklienter, men den generelle støtten er begrenset. De fleste populære e-postklienter støtter kun standard nettfonter. Les mer om hvordan du velger standardskrifttyper som brukes i den klassiske e-postredigereren. 

Slik legger du til en Google Font i en e-postmal du har kodet selv: 

1. Kopier @import-koden for skrifttypen fra Google Fonts.
2. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
3. Åpne den spesialtilpassede e-postmalen i Finder.
4. I<head> delen av malen limer du inn @import-koden mellom <style>....</style> taggene. 
5. I delen « <body> » i malen legger du til den tilpassede skrifttypen ved hjelp av inline-stil. 
6. Klikk på «Publiser endringer» øverst til høyre for å publisere endringene dine. 

Bruk en Google-skrift i en call-to-action (eldre versjon)

1. Kopier Googles kode for å angi CSS-regler for den skrifttypen.
2. I din HubSpot-konto klikker du på Mer og navigerer deretter til Markedsføring > Call-to-action-er. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Call-to-action-er.
3. Hold musepekeren over en call-to-action, og klikk deretter på «Handlinger » >«Rediger». 
4. Klikk på«Avanserte innstillinger» i høyre rute. 
5. Lim inn Googles kode for å angi CSS-regler for den skrifttypen i tekstboksen. 
6. Klikk på«Neste» nederst til høyre. Klikk deretter på Lagre.

Bruk en Google-skrift i et skjema

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > Skjemaer. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Skjemaer.
2. Hold musepekeren over skjemaets navn og klikk på «Handlinger» > «Rediger skjema» eller «Opprett et nytt skjema».
3. I skjemaeditoren klikker du på fanen «Forhåndsvisning» under «Style & ». 
4. I menyen i venstre sidefelt klikker du på«Stil»-delen.
5. I«Tekst»-delenklikker du på rullegardinmenyen«Skriftfamilie» og velger enGoogle-skrift. 
6. Klikk på«Oppdater» eller«Publiser» øverst til høyre for å publisere endringene dine. 

Bruk en Google-skrift i en tilpasset modul

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

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I Finder klikker du på navnet på en tilpasset modul. Les mer om hvordan du oppretter en tilpasset modul.
3. I inspektoren klikker du på rullegardinmenyen «Legg til felt» idelen «Felt» og velger «Skrift». Les mer om hvordan du bruker skriftfeltene.

4. Klikk på «Publiser endringer» øverst til høyre forå publisere endringene dine. 
5. Naviger til innholdet ditt:
   • Nettstedssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Nettstedsside. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Nettstedsside.
   • Landingssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Landingssider. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Landingssider.
   • Blogg: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Blogg. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Blogg.
6. Klikk på navnet på innholdet ved hjelp av den tilpassede modulen. 
7. I innholdsredigereren klikker du på dentilpassede modulen. 
8. I redigeringsverktøyet i sidefeltet klikker du pårullegardinmenyen i feltet «Font»og velger enGoogle Font. 

Bruk egendefinerte skrifttyper

Som et alternativ til å bruke standard nettfonter eller et fontbibliotek somGoogle Fonts, kan du laste opp fontfiler og deretter bruke dem i temaer eller henvise til dem i stilark. 

Bruk egendefinerte skrifttyper i temaer

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

Last opp egendefinerte skrifttyper for sider eller innlegg

Når du har lastet opp egendefinerte skrifttyper, vil de være tilgjengelige for sider, innlegg og artikler i Kunnskapsbase.

1. Naviger til innholdet ditt:

   • Nettstedssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Nettstedsside. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Nettstedsside.
   • Landingssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Landingssider. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Landingssider.
   • Blogg: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Blogg. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Blogg.
2. Klikk på navnet på innholdet ditt. 
3. I innholdsredigereren klikker du på«Rediger»-menyenog velger«Tema: [Navn på tema]».
4. I menyen i venstre sidefelt klikker du på en hvilken som helstnedtrekksmeny for skrifttyper og velger«Administrer varemerke-skrifttyper».
5. Følg trinnene i denne kunnskapsbaseartikkelen for å legge til eller redigere skrifttypene dine.

Last opp egendefinerte skrifttyper til kunnskapsbaseartikler

Når du har lastet opp egendefinerte skrifttyper, vil de være tilgjengelige for sider, innlegg og artikler i Kunnskapsbase.

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Service > Kunnskapsbase. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Service > Kunnskapsbase.
2. Klikk på«Tilpass mal» øverst til høyre.
3. Klikk på fanen «Design » i venstre sidefelt.
4. Klikk på «Skriftstiler» i venstre sidefelt.
5. Klikk på en hvilken som helstnedtrekksmeny for skrifttyper og velg«Administrer varemerke-skrifttyper».
6. Følg trinnene i denne kunnskapsbaseartikkelen for å legge til eller redigere skrifttypene dine.

Rediger egendefinerte skrifttyper

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

Bruk egendefinerte skrifttyper i stilark

Som et alternativ til å bruke standard nettfonter eller et fontbibliotek somGoogle Fonts, kan du legge inn fontfiler i filverktøyet og deretter henvise til dem i stilarket ditt. 

Merk: Egendefinerteskrifttyper er kun tilgjengelige for kontoer med tilgang til Design manager , og må implementeres ved hjelp av Cascading Style Sheets (CSS). Hvis du legger til en egendefinert skrifttype, vil denikke bli lagt til i nedtrekksmenyene for formatering i innholdsredigereren.

For å bruke en skrifttype i innholdet, må du laste opp skrifttypens filer til filverktøyet. Det anbefales å laste opp minst .woff-,.ttf- og .eot-versjoner av skrifttypen for å sikre at den lastes inn i alle nettlesere. Du kan bruke «Expert»-modusen iFont Squirrels konverteringsverktøytil å generere flere filformater.

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Filer. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Filer.
2. Klikk på«Last opp filer».
3. Velgskriftfilene på datamaskinens harddisk, og klikk deretter på«Åpne».
4. Klikk på navnet på en opplastet skriftfil.
5. I høyre rute klikker du på«Kopier URL » for å kopiere nettadressen der filen ligger. Du trenger URL-adressen til skrifttypen for hvert filformat.

Bruk en egendefinert skrifttype i et stilark

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

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. Åpne stilarket som brukes til innholdet ditt i Finder.
3. 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 «Font Name» med navnet på skrifttypen.
  • Erstatt«your_font_file.xxx?» medURL -adressen fra filverktøyet. Gjenta dette for hvert filformat.

4. Opprett CSS-regler med egenskapen ` font-family ` for å bruke den tilpassede skrifttypen. 
5. Klikk på «Oppdater» eller«Publiser» øverst til høyre for å publisere endringene dine. 

Bruk en egendefinert skrifttype i en e-post i dra og slipp-redigeringen for e-post

Egendefinerte e-postskrifter støttes i Apple Mail og støttes delvis i Samsung Mail. Egendefinerte skrifttyper støttes ikke i Gmail, Outlook eller de fleste nettlesere på mobilenheter. For å sikre en ensartet opplevelse for leserne dine, anbefales det å bruke standard nettfonter i e-postene.

Hvis du imidlertid ønsker å legge til en egendefinert skrifttype i en e-post i dra og slipp-redigeringen, kan du gjøre dette etter at du har lastet opp en egendefinert skrifttype til merkevare-kittet ditt og angitt en reserveskrifttype. 

1. Legg til en egendefinert skrifttype i merkevare-kitet ditt, og velg deretter den standardskrifttypen som ligner mest på den egendefinerte skrifttypen. For å unngå problemer med reservefonter:  
   • Bruk reservefonter med en x-høyde og tykkelse som ligner på den du har valgt.
   • Forhåndsvis markedsførings-e-poster i ulike e-postklienter for å se hvilke skrifttyper som vil bli brukt.
   • Sørg for at alle viktige elementer vises som forventet med reservefonter.
2. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > E-post. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > E-post.
3. Klikk pånavnet påen e-post fra e-postmarkedsføringen, eller klikk på«Opprett e-post» for å opprette en ny e-post.
4. Slik bruker du en egendefinert skrifttype til å formatere ulike teksttyper, for eksempel avsnitt eller overskrifter:
   • I e-postredigeringsprogrammet klikker du på ikonet for malutformingi venstre sidefelt.
   • For å angi en skrift i delen «Tekststiler», klikker du på enrullegardinmeny ogvelger enskrift idelen«Egendefinerte skrifter ».

5. Slik bruker du en egendefinert skrifttype i en riktekstmodul: 
   • I e-postredigeringsprogrammet markerer du tekst i en RTF-modul.
   • I riktekstredigereren klikker du pårullegardinmenyen for skrifttyper, holder musepekeren over«Egendefinerte skrifttyper», deretter over en egendefinert skrifttype, og velger enskriftvekt.

6. Innholdet i e-posten er skrevet av, og e-posten blir forhåndsviset i flere e-postklienter.
7. Fullfør og send e-posten.

Bruk en egendefinert skrifttype i en e-postmal med egen koding

Egendefinerte skrifttyper støttes i Apple Mail og støttes delvis i Samsung Mail. Egendefinerte skrifttyper støttes ikke i Gmail, Outlook eller de fleste nettlesere på mobilenheter. For å sikre en ensartet opplevelse for leserne dine, anbefales det å bruke standard nettfonter i e-postene.

Hvis du imidlertid ønsker å legge til en egendefinert skrifttype i en e-postmal du har kodet selv, kan du gjøre det så snart du har lagt til den egendefinerte skrifttypen i filverktøyet.

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I Finder klikker du på navnet på den egendefinerte e-postmalen din.
3. For hver skriftstil:
   • I delen « <head> » i 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');}

1. • Erstatt «Font Name» med navnet på skrifttypen.
   • Erstatt«your_font_file.xxx?» medURL-adressen fra filverktøyet. Gjenta dette for hvert filformat. 

4. I koden for e-postteksten legger du til den tilpassede skrifttypen ved hjelp av inline-stil. 
5. Klikk på «Oppdater» eller«Publiser» øverst til høyre for å publisere endringene dine. 

Bruk en tilpasset skrifttype i en call-to-action

Når du har lagt til en egendefinert skrifttype i temaet ditt, kan du bruke den i CTA-knappene.

1. I din HubSpot-konto klikker du på Mer og navigerer deretter til Markedsføring > Call-to-action-er. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Call-to-action-er.
2. Klikk på rullegardinmenyen øverst til venstre og velg CTA-er
3. Hold musepekeren over en call-to-action, og klikk deretter på Handlinger >Rediger. 
4. I venstre panel i call-to-action-redigeringsverktøyet klikker du på fanen «Design ». 
5. Klikk på «Stiler»-delen for å utvide den.
6. Klikk på rullegardinmenyen «Primær skrift » og velg din egen skrift. 
7. Fortsett å lage din call-to-action. 

Bruk en egendefinert skrifttype i en call-to-action (eldre versjon)

I likhet med CTA-er kan du bruke den med eldre CTA-er etter at du har lastet opp en tilpasset skriftfil.

1. I din HubSpot-konto klikker du på Mer og navigerer deretter til Markedsføring > Call-to-action-er. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Call-to-action-er.
2. Hold musepekeren over en call-to-action, og klikk deretter på Handlinger >Rediger. 
3. Klikk på«Avanserte alternativer» i høyre rute. 
4. Lim inn denne koden i tekstboksen:
   
   font-family: 'Your Font Name';
5. Erstatt «Font Name» mednavnet på skrifttypen.
6. Klikk på«Neste» nederst til høyre. Klikk deretter på Lagre.

Bruk 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. Lær hvordan du legger til en egendefinert skrifttype i en e-postmal du har kodet selv. 

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I Finder klikker du på navnet på den tilpassede modulen.
3. I modulredigereren, i seksjonen«module.css» , lim inn følgende kode:

@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');}

5. • Erstatt «Font Name» med navnet på skrifttypen.
   • Erstatt«your_font_file.xxx?» mednettadressenfra filverktøyet. Gjenta dette for hvert filformat.
6. Opprett CSS-regler med egenskapen ` font-family ` for å bruke den tilpassede skrifttypen. 
7. Klikk på «Publiser endringer» øverst til høyre for å publisere endringene dine.