Vidensbase

Brug skrifttyper i HubSpot

Skrevet af HubSpot Support | Jun 28, 2023 12:41:35 PM

De skrifttyper, der er tilgængelige for indhold i HubSpot, afhænger af indholdstypen og skrifttypen. Visse standardfonte er tilgængelige i alle indholdsredigeringsprogrammer, mens webfonte (som Google Fonts) og brugerdefinerede fonte har yderligere begrænsninger, som beskrevet nedenfor:

Indholdstype Skrifttype
Standard-skrifttyper Web-skrifttyper

Tilpassede skrifttyper

Side - temaskabeloner Tilgængelig i temaindstillinger og via stilark
Side - kodet skabelon Tilgængelig via stilark eller brugerdefineret modul Tilgængelig via stilark
Blog Tilgængelig via stilark eller brugerdefineret modul
E-mail Nogle standardfonte er ikke tilgængelige i træk-og-slip-e-mail-editoren Kun tilgængelig for brugerdefinerede e-mail-skabeloner; understøttes ikke i de fleste e-mail-klienter Kun tilgængelig for brugerdefinerede e-mail-skabeloner; understøttes ikke i de fleste e-mail-klienter
Videnbase Tilgængelig på fanen Design i skabeloneditoren Ikke tilgængelig
Brugerdefineret modul Tilgængelig for brugerdefinerede moduler, der ikke bruges i e-mails Tilgængelig for brugerdefinerede moduler, der ikke bruges i e-mails
CTA (ældre)
CTA

Bemærk: Ikke alle indholdstyper er tilgængelige i alle konti. De indholdstyper, der er tilgængelige for abonnementerne i din HubSpot-konto, kan findes i produkt- og servicekataloget.

Brug standardskrifttyper

Standardskrifttyper kan bruges i alle typer indhold og er designet til at blive indlæst på de fleste platforme og enheder.

  • Naviger til dit indhold:

    • Hjemmesider:
    • Landingssider:
    • Blog:
    • Vidensbase:
    • E-mail:
  • Hold musen over dit indhold, og klik på Rediger.
  • Klik på et rich text-modul i indholdseditoren, og fremhæv derefter den tekst, du vil redigere.
  • Klik på rullemenuen Skrifttype i værktøjslinjen for rig tekst, og vælg en skrifttype. Følgende skrifttyper er tilgængelige i rich text-moduler:
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

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

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Ikke tilgængelig i træk-og-slip-e-mail-editoren.

**Kun tilgængelig som webfont i træk-og-slip-e-mail-editoren.

Brug web-skrifttyper

Webfonte er som standard tilgængelige i indholdseditoren for sider, der bruger startskabeloner og temaer, samt artikler i vidensbasen og brugerdefinerede moduler.

Hvis du er udvikler, kan du også bruge font-feltet til at tilføje webfonte til temaer og brugerdefinerede moduler. Når de bruges på disse måder, indlæses webfonte ikke fra en tredjepartstjeneste; HubSpot vil i stedet indlæse dem direkte på indholdets domæne.

Bemærk: Webfonte kan ikke vælges i dropdown-menuen for fonte i RTF-editoren.

Du kan også bruge tredjepartstjenester som Google Fonts ved at kopiere skrifttypens importkode, indsætte den i indholdets stilark og derefter anvende skrifttypen via CSS:

  • Gå til fonts.google.com.
  • Indtast et skrifttypenavn i søgefeltet.
  • Klik på skrifttypenavnet for at se en liste over stilarter, der kan importeres.
  • Ved siden af hver stil, du vil importere, skal du klikke på + Vælg denne stil
  • I det højre panel skal du vælge @import i afsnittet Brug på nettet .
  • Kopier skrifttypens kode:
    • I afsnittet Use on the web skal du kopiere @import-koden uden <style>-tagget.
    • I feltet CSS rules to specify families skal du kopiere koden til indstilling af CSS-regler.

Når du har koden fra Google Fonts, kan du tilføje skrifttypen til dit HubSpot-indhold:

Brug en Google-skrifttype i et stilark

  • Kopier skrifttypens @import-kode fra Google Fonts.
  • Åbn det stilark, der bruges til dit indhold, i søgeren.
  • Indsæt @import-koden i linje 1 i stilarket.
  • Tilføj koden til indstilling af CSS-regler til de relevante selektorer i stilarket.
  • Klik på Udgiv ændringer øverst til højre for at gøre dine ændringer live.

Brug en Google Font i en specialkodet e-mail-skabelon

Selv om Google Fonts understøttes af Apple Mail og nogle få andre e-mailklienter, er den brede understøttelse begrænset, og de fleste populære e-mailklienter understøtter kun standardwebfonte. Læs mere om at vælge de standardskrifttyper, der bruges i den klassiske e-mail-editor.
Brugerdefinerede e-mailskabeloner er kun tilgængelige i konti med et Marketing Hub Professional eller Enterprise-abonnement.
Sådan tilføjer du en Google Font til en brugerdefineret e-mailskabelon:
  • Kopier skrifttypens @import-kode fra Google Fonts.
  • Åbn den brugerdefinerede e-mailskabelon i søgeren.
  • Indsæt @import-koden mellem <style>....</style> -taggene i skabelonens<head> -afsnit.
  • I koden til e-mailens brødtekst skal du tilføje den tilpassede skrifttype i inline-styling.
  • Klik på Udgiv ændringer øverst til højre for at gøre dine ændringer live.

Brug en Google-skrifttype i en CTA (legacy)

Brug en Google-skrifttype i en formular

  • Hold musen over formularnavnet, og klik på Handlinger > Rediger formular eller Opret en ny formular.
  • Klik på fanen Style & preview i formulareditoren.
  • Klik på sektionen Style i menuen til venstre.
  • Klik på rullemenuen Font family i sektionen Text , og vælg en Google Font.
  • Klik på Opdater eller Udgiv øverst til højre for at tage dine ændringer i brug.

Brug en Google Font i et brugerdefineret modul

Bemærk: Google Fonts er ikke tilgængelige for brugerdefinerede moduler, der bruges i e-mailskabeloner.


  • Klik på Udgiv ændringer øverst til højre for at gøre dine ændringer live.
  • Naviger til dit indhold:

    • Hjemmesider:
    • Landingssider:
    • Blog:
  • Hold musen over det indhold, der bruger det tilpassede modul, og klik på Rediger.
  • Klik på det tilpassede modul i indholdseditoren.
  • Klik på rullemenuen Font field i sidebar-editoren, og vælg en Google Font.

Brug brugerdefinerede skrifttyper

Som et alternativ til at bruge standardwebskrifttyper eller et skrifttypebibliotek som Google Fonts kan du uploade skrifttypefiler og derefter bruge dem i temaer eller henvise til dem i stylesheets.

Brug brugerdefinerede skrifttyper i temaer

I temaeditoren kan du uploade en brugerdefineret skrifttype og derefter bruge den på sider og i indlæg. Skrifttypefiler understøttes i følgende formater: TTF, OTF, WOFF.

Upload brugerdefinerede skrifttyper

  • Naviger til dit indhold:

    • Hjemmesider:
    • Landingssider:
    • Blog:
  • Hold musen over dit indhold, og klik på Rediger.
  • Klik på menuen Rediger i indholdseditoren, og vælg Tema: [Navn på tema].
  • Klik på en skrifttype i dropdown-menuen i venstre sidepanel, og vælg Upload en brugerdefineret skrifttype.
  • I det højre panel skal du indtaste en betegnelse for din skrifttype i feltet Font Name .
  • Klik på Vælg skrifttypefiler, og vælg en eller flere skrifttypefiler, og klik derefter på Næste.

  • Klik på rullemenuen Font Style 1 , og vælg den stil , din skriftfil bruger. Du kan indstille den samme skrifttypefil til flere stilarter.
  • Hvis du vil tilføje flere skrifttypestilarter, skal du klikke på + Tilføj en anden skrifttypestilart og derefter tilføje dine skrifttypestilarter. Hver uploadet skrifttypefil skal have mindst én tilknyttet stilart.
  • Når du har tilføjet alle relevante skrifttyper, skal du klikke på Udført.

Rediger brugerdefinerede skrifttyper

Når du har uploadet en brugerdefineret skrifttype i temaeditoren, kan du uploade flere skrifttyper, tilpasse eksisterende skrifttyper med flere skrifttypestilarter eller slette skrifttyper.

  • Naviger til dit indhold:

    • Hjemmesider:
    • Landingssider:
    • Blog:
  • Hold musen over dit indhold, og klik på Rediger.
  • Klik på menuen Rediger i indholdseditoren, og vælg Tema: [Navn på tema].
  • Klik i menuen i venstre side for at udvide sektionen Skrifttyper .
  • Klik på en -skrifttype i rullemenuen , og vælgManage custom fonts.
  • For at tilføje en ny skrifttype skal du klikke på Tilføj en brugerdefineret skrifttype i dialogboksen.
  • Sådan redigerer du en skrifttype:
    • Klik på rullemenuen Handlinger ved siden af skrifttypen i dialogboksen, og vælg Rediger.
    • Hvis du vil ændre navnet på skrifttypen, skal du klikke på Rediger ud for skrifttypenavnet og derefter indtaste et nyt skrifttypenavn.
    • Hvis du vil tilføje flere skrifttypestile, skal du klikke på Tilføj en anden skrifttypestil og derefter klikke på rullemenuen Skrifttypestil og vælge en stil. Klik på Upload, og upload derefter en skrifttypefil.
    • Hvis du vil slette en skrifttype, skal du klikke påsletteikonet deletededel   ved siden af skrifttypen. Du kan ikke slette en skrifttype, hvis der ikke er andre skrifttyper på listen.
    • Klik på Gem.
  • Hvis du vil slette en skrifttype, skal du klikke på rullemenuen Handlinger i dialogboksen og vælge Slet.

Bemærk: Hvis du sletter en skrifttype, fjernes den fra alle dropdown-menuer, men skrifttypefilerne forbliver i filværktøjet, indtil de slettes der.


  • Når du er færdig med at redigere dine skrifttyper, skal du klikke på Udført.

Brug brugerdefinerede skrifttyper i stylesheets

Som et alternativ til at bruge standardwebskrifttyper eller et skrifttypebibliotek som Google Fonts kan du hoste skrifttypefiler i filværktøjet og derefter henvise til dem i dit stilark.

Bemærk: Brugerdefinerede skrifttyper er kun tilgængelige på konti med adgang til designmanageren og skal anvendes med CSS. Tilføjelse af en brugerdefineret skrifttype vil ikke tilføje skrifttypen til styling-dropdown-menuer i indholdseditoren.

For at bruge en skrifttype i indhold skal du uploade skrifttypens filer til filværktøjet. Det anbefales at uploade mindst .woff-, .ttf- og .eot-versioner af skrifttypen for at sikre, at din skrifttype indlæses i alle browsere. Du kan bruge ekspertfunktionen i Font Squirrels konverteringsværktøj til at generere yderligere filformater.

  • Klik på Upload filer.
  • Vælg skrifttypefilerne på din computers harddisk, og klik derefter på Åbn.
  • Klik på navnet på en uploadet skrifttypefil.
  • Klik på Kopier URL i højre panel for at kopiere den URL, hvor filen er hostet. Du skal bruge URL'en til skrifttypen i hvert filformat.

Brug en brugerdefineret skrifttype i et stilark

Når du har tilføjet en brugerdefineret skrifttype til filværktøjet, kan du henvise til den i et stilark. Hver skrifttype (kursiv, fed osv.) kræver en separat @font-face-regel. Læs mere om at arbejde med stylesheets i HubSpot.

  • Åbn det stilark, der bruges til dit indhold, i søgeren.
  • For hver skrifttype:
    • Indsæt 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');}
    • Erstat Your Font Name med navnet på skrifttypen.
    • Erstat your_font_file.xxx? med URL' en fra filværktøjet. Gentag for hvert filformat.
  • Opret CSS-regler med font-family-egenskaben for at anvende den tilpassede skrifttype.
  • Klik på Opdater eller Udgiv øverst til højre for at tage dine ændringer i brug.

Brug en brugerdefineret skrifttype i en brugerdefineret kodet e-mail-skabelon

Brugerdefinerede skrifttyper understøttes ikke i de fleste populære e-mailklienter. For at sikre en ensartet oplevelse for dine læsere anbefales det at bruge standardwebskrifttyper i e-mails. Men hvis du gerne vil tilføje en brugerdefineret skrifttype til en brugerdefineret kodet e-mailskabelon, kan du gøre det, når du har tilføjet den brugerdefinerede skrifttype til filværktøjet.

  • Åbn den brugerdefinerede e-mailskabelon i søgeren.
  • For hver skrifttype:
    • I skabelonens <head>-sektion skal du indsætte denne kode mellem <style>....</style>-tags:
@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');}
    • Erstat Your Font Name med navnet på skrifttypen.
    • Erstat your_font_file.xxx? med URL' en fra filværktøjet. Gentag for hvert filformat.
  • I koden til e-mailens brødtekst skal du tilføje den tilpassede skrifttype i inline-styling.
  • Klik på Opdater eller Udgiv øverst til højre for at tage dine ændringer i brug.

Brug en brugerdefineret skrifttype i en CTA

Når du har tilføjet en brugerdefineret skrifttype til dit tema, kan du bruge den med CTA'er:

  • Klik på rullemenuen øverst til venstre, og vælg CTA'er.
  • Hold musen over en CTA, og klik derefter på Handlinger > Rediger.
  • Klik på fanen Design i venstre side af CTA-editoren.
  • Klik på sektionen Styles for at udvide.
  • Klik på rullemenuen Primary Font , og vælg din egen skrifttype.
  • Fortsæt med at lave din CTA.

Brug en brugerdefineret skrifttype i en CTA (legacy)

Ligesom med CTA'er kan du, når du har uploadet en brugerdefineret formularfil, bruge den med ældre CTA'er:

  • Hold musen over en CTA, og klik derefter på Handlinger > Rediger.
  • Klik på Avancerede indstillinger i højre panel.
  • Indsæt denne kode i tekstboksen:

font-family: 'Your Font Name';

  • Erstat Your Font Name med navnet på skrifttypen.
  • Klik på Næste nederst til højre. Klik derefter på Gem.

Brug en brugerdefineret skrifttype i et brugerdefineret modul

Når du har tilføjet en brugerdefineret skrifttype til filværktøjet, kan du bruge den i brugerdefinerede blog- eller sidemoduler. Se, hvordan du tilføjer en brugerdefineret skrifttype til en brugerdefineret kodet e-mailskabelon.

  • Åbn det brugerdefinerede modul i stifinderen.
  • Indsæt følgende kode i afsnittet module.css:
@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');}
  • Erstat Your Font Name med navnet på skrifttypen.
  • Erstat your_font_file.xxx? med URL' en fra filværktøjet. Gentag for hvert filformat.
  • Opret CSS-regler med font-family-egenskaben for at anvende den tilpassede skrifttype.
  • Klik på Udgiv ændringer øverst til højre for at gøre dine ændringer live.