Spring til indhold
Bemærk:Oversættelsen af denne artikel er kun til rådighed for nemheds skyld. Oversættelsen oprettes automatisk via en oversættelsessoftware og er muligvis ikke blevet korrekturlæst. Den engelske version af denne artikel bør således anses for at være den gældende version, der indeholder de seneste oplysninger. Du kan få adgang til den her.

Brug skrifttyper i HubSpot

Sidst opdateret: oktober 27, 2023

Gælder for:

Alle produkter og abonnementer

De skrifttyper, der er tilgængelige for indhold i HubSpot, afhænger af typen af indhold og typen af skrifttype. Visse standardskrifttyper er tilgængelige i alle indholdsredaktører, mens webskrifttyper (såsom Google Fonts) og brugerdefinerede skrifttyper har yderligere begrænsninger, som er beskrevet nedenfor:

Indholdstype Skrifttype
Standardskrifttyper Web-skrifttyper

Brugerdefinerede skrifttyper
Side - startskabeloner ✓ Tilgængelig på fanenStilarter i indholdseditoren Ikke tilgængelig
Side - temaskabeloner ✓ Tilgængelig i temaindstillinger og via stilark Tilgængelig via stilark
Side - kodet skabelon ✓ Tilgængelig via stilark eller brugerdefineret modul Tilgængelig via stilark
Blog ✓ Tilgængelig via stilark eller brugerdefineret modul Tilgængelig via stilark
E-mail Nogle standardskrifttyper er ikke tilgængelige i drag and drop-e-maileditoren Kun tilgængelig for specialkodede e-mailskabeloner; understøttes ikke i de fleste e-mailklienter. Kun tilgængelig for specialkodede e-mailskabeloner; understøttes ikke i de fleste e-mailklienter.
Videnbase ✓ Tilgængelig på fanen Design i skabel oneditoren 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) ✓ ✓ ✓

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:

    • Hjemmeside-sider: Naviger i din HubSpot-konto til Marketing > Websted > Websider.
    • Landingssider: Naviger i din HubSpot-konto til Marketing > Landingssider.
    • Blog: Naviger i din HubSpot-konto til Marketing > Websted > Blog.
    • Vidensbase: Naviger i din HubSpot-konto til Service > Vidensbase.
    • E-mail: Naviger i din HubSpot-konto til Marketing > 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 til 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 drag and drop 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 webfonts til temaer og brugerdefinerede moduler. Når de bruges på denne måde, indlæses webfonts ikke fra en tredjepartstjeneste; HubSpot indlæser dem i stedet direkte på indholdets domæne.

Bemærk venligst: webfonte kan ikke vælges i dropdown-menuen for fonte i rich text editor.

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

  • Gå til fonts.google.com.
  • Indtast et skriftnavn i søgefeltet.
  • Klik på skrifttypens navn for at se en liste over tilgængelige stilarter, der kan importeres.
  • Klik på + Vælg denne stil ud for hver stil, du vil importere.
  • I højre panel skal du vælge @import i afsnittet Use on the web .
  • Kopier skrifttypens kode:
    • I afsnittet Use on the web skal du kopiere @import-koden uden <style>-tagget.
    • I feltet CSS-regler til angivelse af familier skal du kopiere koden til indstilling af CSS-regler.

copy-google-font

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.
  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Designværktøjer.
  • Åbn det stilark, der er brugt 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å Publish changes øverst til højre for at gøre dine ændringer live.
add-google-fonts-imported-font-to-stylesheet

Brug en Google Font i en specialkodet e-mailskabelon

Selvom Google Fonts understøttes af Apple Mail og et par 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, hvordan du vælger de standardfonte, der bruges i den klassiske e-maileditor.
Brugerdefinerede kodede e-mailskabeloner er kun tilgængelige på 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.
  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Designværktøjer.
  • Åbn den specialkodede e-mailskabelon i søgeren.
  • I<head> -sektionen af skabelonen indsætter du @import-koden mellem <style>....</style> -tags.
  • I koden til e-mailens brødtekst skal du tilføje den brugerdefinerede skrifttype i inline styling.
  • Klik på Publish changes øverst til højre for at gøre dine ændringer live.

Brug en Google-skrifttype i en CTA (legacy)

  • Kopier Googles kode til indstilling af CSS-regler for den pågældende skrifttype.
  • Naviger i din HubSpot-konto til Marketing > Leadgenerering > CTA'er.
  • Hold musen over en CTA, og klik derefter på Handlinger > Rediger.
  • Klik på Avancerede indstillinger i højre panel.
  • I tekstfeltet skal du indsætte Googles kode til indstilling af CSS-regler for den pågældende skrifttype.
  • Klik på Næste nederst til højre. Klik derefter på Gem.

Brug en Google-skrifttype i en formular

  • Naviger i din HubSpot-konto til Marketing > Leadgenerering > Formularer.
  • Hold musen over formularens navn, og klik på Handlinger > Rediger formular eller Opret en ny formular.
  • Klik på fanen Style & preview i formulareditoren.
  • Klik på sektionen Style i menuen i venstre side.
  • Klik på dropdown-menuen Font family i sektionen Text , og vælg en Google Font.
  • Klik på Update eller Publish øverst til højre for at føre dine ændringer ud i livet.

Brug en Google-skrifttype i et brugerdefineret modul

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


  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Designværktøjer.

click-add-field

  • Klik på Publish changes øverst til højre for at gøre dine ændringer live.

  • Naviger til dit indhold:

    • Hjemmeside-sider: Naviger i din HubSpot-konto til Marketing > Websted > Websider.
    • Landingssider: Naviger i din HubSpot-konto til Marketing > Landingssider.
    • Blog: Naviger i din HubSpot-konto til Marketing > Websted > Blog.
  • Hold musen over indholdet med det tilpassede modul, og klik på Rediger.
  • Klik på det brugerdefinerede modul i indholdseditoren.
  • Klik på dropdown-menuen Font field i sidebar-editoren, og vælg en Google Font.

Brug brugerdefinerede skrifttyper

Som et alternativ til at bruge standardwebfonte eller bruge et fontbibliotek som Google Fonts, kan du hoste fontfiler 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 af dropdown-menuer i indholdseditoren.

For at bruge en font i indhold skal du uploade fontens filer til filværktøjet. HubSpot anbefaler, at du som minimum uploader .woff-, .ttf- og .eot-versionerne af fonten for at sikre, at din font indlæses i alle browsere. Du kan bruge ekspertfunktionen i Font Squirrel's konverteringsværktøj til at generere yderligere filformater.

  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Filer.
  • Klik på Upload filer.
  • Vælg skrifttypefilerne på din computers harddisk, og klik derefter på Åbn.
  • Klik på navnet på en uploadet skrifttypefil.
  • I højre panel skal du klikke på Copy URL 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 font 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.

  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Designværktøjer.
  • Åbn det stilark, der er brugt til dit indhold, i søgeren.
  • For hver skrifttypestil:
    • 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 din_font_fil.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å Update eller Publish øverst til højre for at føre dine ændringer ud i livet.

sample-custom-font-in-stylesheet

Brug en brugerdefineret skrifttype i en brugerdefineret kodet e-mailskabelon

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 standardwebfonts 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.

  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Designværktøjer.
  • Åbn den specialkodede 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 din_font_fil.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å Update eller Publish øverst til højre for at føre dine ændringer ud i livet.

Brug en brugerdefineret skrifttype i en CTA (legacy)

Når du har tilføjet en brugerdefineret skrifttype til filværktøjet, kan du bruge den i ældre CTA'er:

  • Naviger i din HubSpot-konto til Marketing > Leadgenerering > 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 tekstfeltet:

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.

set-custom-font-for-cta

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. Lær, hvordan du tilføjer en brugerdefineret font til en brugerdefineret kodet e-mailskabelon.

  • Naviger i din HubSpot-konto til Marketing > Filer og skabeloner > Designværktøjer.
  • Åbn det brugerdefinerede modul i søgeren.
  • 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 din_font_fil.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å Publish changes øverst til højre for at gøre dine ændringer live.

custom-module-custom-font
Var denne artikel nyttig?
Denne formular bruges kun til dokumentationsfeedback. Læs, hvordan du kan få hjælp hos HubSpot.
Indholdsfortegnelse /da/website-pages/use-fonts-in-hubspot Menu

Relateret indhold