Brug skrifttyper i HubSpot

Skrifttyper i HubSpot er tilgængelige på forskellige måder, afhængigt af indholdstypen og skrifttypen. Nogle standardskrifttyper er tilgængelige i alle indholdseditorer. Webskrifttyper og brugerdefinerede skrifttyper skal muligvis tilføjes til temaindstillinger, stilark, brugerdefinerede moduler eller kodede skabeloner.

Før du går i gang

Inden du begynder at bruge skrifttyper i HubSpot, bør du gennemgå kravene og de ting, du skal være opmærksom på.

Forstå begrænsninger og overvejelser

• Ikke alle indholdstyper er tilgængelige på alle konti. For at se, hvilke indholdstyper der er tilgængelige i dit abonnement, kan du se i produkt & -servicekataloget.
• Se tabellen nedenfor for at få et overblik over, hvilke skrifttypeindstillinger der er tilgængelige for de enkelte indholdstyper:

Brug standardskrifttyper i rich text-moduler

Standardskrifttyper understøttes i alt indhold på HubSpot, men de tilgængelige muligheder og hvor du kan anvende dem, afhænger af indholdstypen.

1. Naviger til dit indhold:

   • Websider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Webside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Webside.
   • Landingssider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Landingsside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Landingsside.
   • Blog: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Blog. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Blog.
   • E-mail: Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > E-mail. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > E-mail.
2. Klik på navnet på dit indhold.
3. I indholdseditoren skal du klikke på etrich text-modul og derefter markere den tekst, du vil redigere. 
4. Klik pårullemenuen »Skrifttype«i værktøjslinjen til formatering, og vælg en skrifttype. Følgende skrifttyper er tilgængelige i rich text-moduler:

Brug webfonts

Webskrifttyper understøttes i visse typer HubSpot-indhold, men de er ikke tilgængelige i rullemenuen »Skrifttype« i rich text-editoren. Afhængigt af indholdstypen kan webfonts anvendes i temaindstillinger, stilark, brugerdefinerede moduler eller kodede skabeloner. 

Udviklere kan bruge font-feltet til at tilføje webfonts til temaer og brugerdefinerede moduler. Når webfonts tilføjes på denne måde, indlæser HubSpot dem direkte på indholdets domæne i stedet for at hente dem fra en tredjepartstjeneste.

Brug tredjepartstjenester som f.eks. Google Fonts ved at kopiere skrifttypens importkode, indsætte den i indholdets stilark og derefter anvende skrifttypen via CSS:

1. Gå til fonts.google.com.
2. Indtastnavnet på enskrifttype i søgefeltet. 
3. Klik på skrifttypens navn for at se en liste over de stilarter, der kan importeres.
4. Klik på »Hent skrifttype« øverst til højre.
5. Klik på »Hent indlejringskode« øverst til højre.
6. I højre kolonne skal du vælge @import under fanen »Web «.
7. Kopier @import- koden uden <style> -tagget.
8. Kopierkoden tilCSS-klassen for at definere CSS-regler. 

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

• • Brug en Google Font i et stilark
  • Brug en Google Font i en brugerdefineret e-mailskabelon
  • Brug en Google Font i en CTA (ældre version)
  • Brug en Google Font i en formular
  • Brug en Google Font i et brugerdefineret modul

Brug en Google-skrifttype i et stilark

1. Kopier skrifttypens @import-kode fra Google Fonts.
2. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
3. Åbn det stilark, der bruges til dit indhold, i Finder.
4. Indsæt koden for at importere @import i linje 1 i stilarket. 
5. Indsæt koden til at definere CSS-regler for de relevante selektorer i stilarket.
6. Klik på»Udgiv ændringer « øverst til højre for at offentliggøre dine ændringer. 

Brug en Google Font i en brugerdefineret e-mailskabelon

Google Fonts understøttes i Apple Mail og nogle få andre e-mail-klienter, men den generelle understøttelse er begrænset. De mest populære e-mail-klienter understøtter kun standard-webskrifttyper. Læs mere om, hvordan du vælger de standardskrifttyper, der bruges i den klassiske e-mail-editor. 

Sådan tilføjer du en Google Font til en brugerdefineret e-mailskabelon: 

1. Kopier skrifttypens @import-kode fra Google Fonts.
2. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
3. Åbn den brugerdefinerede e-mailskabelon i Finder.
4. I<head> af skabelonen skal du indsætte @import-koden mellem <style>....</style> tags. 
5. I afsnittet » <body> « i skabelonen skal du tilføje den brugerdefinerede skrifttype i inline style. 
6. Klik på »Udgiv ændringer« øverst til højre for at offentliggøre dine ændringer. 

Brug en Google-skrifttype i en CTA (ældre version)

1. Kopier Googles kode til at definere CSS-regler for den pågældende skrifttype.
2. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > CTA'er. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > CTA'er.
3. Hold musen over en CTA, og klik derefter på »Handlinger« >»Rediger«. 
4. Klik på»Avancerede indstillinger« i højre panel. 
5. Indsæt Googles kode til at definere CSS-regler for den pågældende skrifttype i tekstfeltet. 
6. Klik på»Næste« nederst til højre. Klik derefter på Gem.

Brug en Google Font i en formular

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > Formularer. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > Formularer.
2. Hold markøren over formularnavnet, og klik på »Handlinger« > »Rediger formular« eller »Opret en ny formular«.
3. I formularredigeringsprogrammet skal du klikke på fanen »Style & « (Forhåndsvisning af stil ). 
4. Klik påafsnittet »Style«i menuen i venstre sidepanel.
5. Iafsnittet »Tekst«skal du klikke på rullemenuen»Skrifttype« og vælge enGoogle-skrifttype. 
6. Klik på»Opdater« eller»Udgiv« øverst til højre for at offentliggøre dine ændringer. 

Brug en Google Font i et brugerdefineret modul

Bemærk: Google Fonts kan ikke bruges i brugerdefinerede moduler, der anvendes i e-mail-skabeloner.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på navnet på et brugerdefineret modul i Finder. Læs mere om, hvordan du opretter et brugerdefineret modul.
3. I inspektoren skal du klikke på rullemenuen »Tilføj felt« iafsnittet »Felter« og vælge »Skrifttype«. Læs mere om, hvordan man arbejder med skrifttypefelter.

4. Klik på »Udgiv ændringer« øverst til højre for atoffentliggøre dine ændringer. 
5. Naviger til dit indhold:
   • Websider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Webside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Webside.
   • Landingssider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Landingsside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Landingsside.
   • Blog: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Blog. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Blog.
6. Klik på navnet på indholdet ved hjælp af det brugerdefinerede modul. 
7. Klik på detbrugerdefinerede modul i indholdseditoren. 
8. I redigeringspanelet i sidepanelet skal du klikke pårullemenuen i feltet »Font«og vælge enGoogle Font. 

Brug brugerdefinerede skrifttyper

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

Brug brugerdefinerede skrifttyper i temaer

I temaredigeringsværktøjet skal du uploade en brugerdefineret skrifttype og derefter bruge den på sider og indlæg. Fontfiler understøttes i følgende formater: TTF, OTF, WOFF.

Upload brugerdefinerede skrifttyper til sider eller indlæg

Når du har uploadet brugerdefinerede skrifttyper, vil de være tilgængelige til sider, indlæg og artikler i vidensbasen.

1. Naviger til dit indhold:

   • Websider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Webside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Webside.
   • Landingssider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Landingsside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Landingsside.
   • Blog: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Blog. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Blog.
2. Klik på navnet på dit indhold. 
3. I indholdseditoren skal du klikke påmenuen »Rediger«og vælge»Tema: [Temaets navn]«.
4. Klik på en vilkårligrullemenu for skrifttyper i menuen i venstre sidepanel, og vælg»Administrer mærkeskrifttyper«.
5. Følg vejledningen i denne artikel i Vidensbase for at tilføje eller redigere dine skrifttyper.

Upload brugerdefinerede skrifttyper til artikler i vidensbasen

Når du har uploadet brugerdefinerede skrifttyper, vil de være tilgængelige til sider, indlæg og artikler i vidensbasen.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Service > Vidensbase. Hvis Mere ikke vises på din konto, skal du navigere direkte til Service > Vidensbase.
2. Klik på»Tilpas skabelon« øverst til højre.
3. Klik på fanen »Design« i venstre sidepanel.
4. Klik på »Skrifttypestilarter« i venstre sidepanel.
5. Klik på en vilkårligrullemenu for skrifttyper, og vælg»Administrer brand-skrifttyper«.
6. Følg vejledningen i denne artikel i Vidensbase for at tilføje eller redigere dine skrifttyper.

Rediger brugerdefinerede skrifttyper

Når du har uploadet en brugerdefineret skrifttype i temaredigeringsværktøjet, kan du uploade yderligere skrifttyper, tilpasse eksisterende skrifttyper med yderligere skriftformater eller slette skrifttyper.

Brug brugerdefinerede skrifttyper i stilark

Som et alternativ til at bruge standard-webskrifttyper eller et skrifttypebibliotek somGoogle Fonts kan du hoste skrifttypefiler i filværktøjet og derefter henvise til dem i dit stilark. 

Bemærk: Brugerdefineredeskrifttyper er kun tilgængelige på konti med adgang til Designmanager og skal implementeres via CSS. Hvis du tilføjer en brugerdefineret skrifttype, vil denikke blive vist i rullemenuerne til formatering i indholdseditoren.

Hvis du vil bruge en skrifttype i dit 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 den vises korrekt i alle browsere. Du kan bruge ekspertfunktionen iFont Squirrels konverteringsværktøjtil at generere yderligere filformater.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Filer. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Filer.
2. Klik på»Upload filer«.
3. Vælgskrifttypefilerne på computerens harddisk, og klik derefter på»Åbn«.
4. Klik på navnet på en uploadet skrifttypefil.
5. 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 skrifttypestil (kursiv, fed osv.) kræver en separat @font-face-regel . Læs mere om, hvordan du arbejder med stylesheets i HubSpot. 

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Åbn det stilark, der bruges til dit indhold, i Finder.
3. 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.
  • Erstatyour_font_file.xxx? medURL’en fra filværktøjet. Gentag for hvert filformat.

4. Opret CSS-regler med egenskaben »font-family« for at anvende den brugerdefinerede skrifttype. 
5. Klik på »Opdater« eller»Udgiv« øverst til højre for at offentliggøre dine ændringer. 

Brug en brugerdefineret skrifttype i en e-mail i træk og slip-editoren

Brugerdefinerede e-mail-skrifttyper understøttes i Apple Mail og delvist i Samsung Mail. Brugerdefinerede skrifttyper understøttes ikke i Gmail, Outlook eller de fleste mobile webklienter. For at sikre en ensartet oplevelse for dine læsere anbefales det at bruge standardwebskrifttyper i e-mails.

Hvis du derimod gerne vil tilføje en brugerdefineret skrifttype til en e-mail i træk og slip-editoren, kan du gøre det, efter at du har uploadet en brugerdefineret skrifttype til dit brand-kit og angivet en reserveskrifttype. 

1. Tilføj en brugerdefineret skrifttype til dit brand-kit, og vælg derefter den standardskrifttype, der ligner din brugerdefinerede skrifttype mest. For at undgå problemer med reservefonte:  
   • Brug reservefonte med en x-højde og tykkelse, der ligner din brugerdefinerede font.
   • Se en forhåndsvisning af e-mailmarketing-e-mails i forskellige e-mail-klienter for at se, hvilke skrifttyper der vil blive brugt.
   • Sørg for, at alle vigtige elementer vises som forventet med reservefonte.
2. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > E-mail. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > E-mail.
3. Klik pånavnet påen e-mail fra e-mailmarketing, eller klik på»Opret e-mail« for at oprette en ny e-mail.
4. Sådan bruger du en brugerdefineret skrifttype til at formatere forskellige teksttyper, f.eks. afsnit eller overskrifter:
   • I e-mail-editoren skal du klikke på ikonet for designet for skabeloni venstre sidepanel.
   • For at indstille en skrifttype i afsnittet »Tekstformater«skal du klikke pårullemenuen ogvælge enskrifttype iafsnittet»Brugerdefinerede skrifttyper «.

5. Sådan bruger du en brugerdefineret skrifttype i et rich text-modul: 
   • I e-mail-editoren skal du markere tekst i et rich text-modul.
   • I rich text-editoren skal du klikke pårullemenuen for skrifttyper, holde markøren over»Brugerdefinerede skrifttyper«, derefter over en brugerdefineret skrifttype og vælge enskriftstyrke.

6. Brug editoren til at skrive indholdet af e-mailen, og se derefter et eksempel på e-mailen i flere e-mail-klienter.
7. Afslut og send e-mailen.

Brug en brugerdefineret skrifttype i en selvkodet e-mailskabelon

Brugerdefinerede skrifttyper understøttes i Apple Mail og delvist i Samsung Mail. Brugerdefinerede skrifttyper understøttes ikke i Gmail, Outlook eller de fleste mobile webklienter. For at sikre en ensartet oplevelse for dine læsere anbefales det at bruge standardwebskrifttyper i e-mails.

Hvis du derimod gerne vil tilføje en brugerdefineret skrifttype til en skræddersyet e-mailskabelon, kan du gøre det, så snart du har tilføjet den brugerdefinerede skrifttype til filværktøjet.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på navnet på din brugerdefinerede e-mailskabelon i Finder.
3. For hver skrifttypestil:
   • I afsnittet » <head> « i skabelonen skal du indsætte denne kode mellem <style>...</style> -tagene: 

@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. • Erstat »Your Font Name« med navnet på skrifttypen.
   • Erstatyour_font_file.xxx? medURL’enfra filværktøjet. Gentag for hvert filformat. 

4. I koden i e-mailens brødtekst skal du tilføje den brugerdefinerede skrifttype ved hjælp af inline style. 
5. Klik på »Opdater« eller»Udgiv« øverst til højre for at offentliggøre dine ændringer. 

Brug en brugerdefineret skrifttype i en CTA

Når du har tilføjet en brugerdefineret skrifttype til dit tema, kan du bruge den i dine CTA’er.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > CTA'er. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > CTA'er.
2. Klik på rullemenuen øverst til venstre, og vælg CTA’er
3. Hold musen over en CTA, og klik derefter på Handlinger >Rediger. 
4. Klik på fanen »Design« i venstre panel i CTA-editoren. 
5. Klik på afsnittet »Stilarter« for at udvide det.
6. Klik på rullemenuen »Primær skrifttype« , og vælg din brugerdefinerede skrifttype. 
7. Fortsæt med at oprette din CTA. 

Brug en brugerdefineret skrifttype i en CTA (ældre version)

Ligesom med CTA’er skal du, når du har uploadet en brugerdefineret skrifttypefil, bruge den sammen med ældre CTA’er.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > CTA'er. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > CTA'er.
2. Hold musen over en CTA, og klik derefter på Handlinger >Rediger. 
3. Klik på»Avancerede indstillinger« i højre panel. 
4. Indsæt følgende kode i tekstfeltet:
   
   font-family: 'Your Font Name';
5. Erstat »Your Font Name« mednavnet på skrifttypen.
6. 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. Lær, hvordan du tilføjer en brugerdefineret skrifttype til en selvkodet e-mailskabelon. 

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på navnet på det brugerdefinerede modul i Finder.
3. I modulredigeringsværktøjet skal du indsætte følgende kode i afsnittetmodule.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');}

5. • Erstat »Your Font Name« med navnet på skrifttypen.
   • Erstatyour_font_file.xxx? medURL’enfra filværktøjet. Gentag for hvert filformat.
6. Opret CSS-regler med egenskaben »font-family« for at anvende den brugerdefinerede skrifttype. 
7. Klik på »Udgiv ændringer« øverst til højre for at offentliggøre dine ændringer.