Käytä fontteja HubSpotissa

HubSpotin fontit ovat käytettävissä eri tavoin sisältötyypin ja fonttityypin mukaan. Jotkin oletusfontit ovat käytettävissä kaikissa sisällönmuokkausohjelmissa. Verkkofontit ja mukautetut fontit on mahdollisesti lisättävä teema-asetuksiin, tyylitiedostoihin, mukautettuihin moduuleihin tai koodattuihin malleihin.

Ennen kuin aloitat

Ennen kuin alat käyttää fontteja HubSpotissa, tutustu vaatimuksiin ja huomioitaviin seikkoihin.

Ymmärrä rajoitukset ja huomioitavat seikat

• Kaikki sisältötyypit eivät ole käytettävissä kaikissa tileissä. Varmistaaksesi, mitkä sisältötyypit ovat käytettävissä tilauksessasi, tutustu Tuote- ja palveluluetteloon.
• Tutustu alla olevaan taulukkoon, jotta ymmärrät, mitkä fonttivaihtoehdot ovat käytettävissä kussakin sisältötyypissä:

Käytä oletusfontteja rich text -moduuleissa

Oletusfontteja tuetaan kaikessa HubSpot-sisällössä, mutta käytettävissä olevat vaihtoehdot ja niiden soveltamisalueet riippuvat sisältötyypistä.

1. Siirry sisältöösi:

   • Verkkosivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Verkkosivuston sivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Verkkosivuston sivut.
   • Laskeutumissivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Aloitussivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Aloitussivut.
   • Blogi: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Blogi. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Blogi.
   • Sähköposti: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Sähköposti. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Sähköposti.
2. Napsauta sisällön nimeä.
3. Napsauta sisältöeditorissarich text -moduulia ja korosta sitten teksti, jota haluat muokata. 
4. Napsauta rich text -työkalurivilläFontti-pudotusvalikkoaja valitse fontti. Seuraavat fontit ovat käytettävissä rich text -moduuleissa:

Käytä verkkofontteja

Verkkofontteja tuetaan joissakin HubSpot-sisällöissä, mutta ne eivät ole käytettävissä rich text -editorin Font -pudotusvalikossa. Sisältötyypistä riippuen verkkofontteja voidaan käyttää teema-asetuksissa, tyylitiedostoissa, mukautetuissa moduuleissa tai koodatuissa malleissa. 

Kehittäjät voivat käyttää fonttikenttää web -fonttien lisäämiseen teemoihin ja mukautettuihin moduuleihin. Kun web-fontit lisätään tällä tavalla, HubSpot lataa ne suoraan

sisällön

verkkotunnukselle sen sijaan, että lataisi ne

kolmannen osapuolen

palvelusta.

Käytä kolmannen osapuolen palveluita, kuten Google Fonts, kopioimalla fontin tuontikoodi, liittämällä se sisällön tyylitiedostoon ja soveltamalla fonttia sitten CSS:n kautta:

1. Siirry osoitteeseen fonts.google.com.
2. Kirjoita hakupalkkiinfontin nimi. 
3. Napsauta fontin nimeä nähdäksesi luettelon tuontia varten käytettävissä olevista tyyleistä.
4. Napsauta oikeassa yläkulmassa olevaa Hanki fontti -painiketta.
5. Napsauta oikeassa yläkulmassa olevaa Hanki upotuskoodi -painiketta.
6. Valitse oikeanpuoleisesta sarakkeesta Web -välilehden @import.
7. Kopioi @import-koodi ilman <style> -tagiä.
8. KopioiCSS-luokkakoodi CSS-sääntöjen asettamista varten. 

9. Kun olet kopioinut koodin Google Fontsista, voit lisätä fontin HubSpot-sisältöösi: 

• • Käytä Google-fonttia tyylitiedostossa
  • Käytä Google-fonttia mukautetussa sähköpostimallissa
  • Käytä Google-fonttia CTA:ssa (vanha versio)
  • Käytä Google-fonttia lomakkeessa
  • Käytä Google-fonttia mukautetussa moduulissa

Käytä Google-fonttia tyylitiedostossa

1. Kopioi fontin @import-koodi Google Fontsista.
2. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
3. Avaa hakutoiminnossa sisältösi tyylitiedosto.
4. Liitä @import-koodi tyylitiedoston riville 1. 
5. Lisää koodi CSS-sääntöjen asettamiseksi tyylitiedoston sopiviin valitsimiin.
6. Napsauta oikeassa yläkulmassaJulkaise muutokset, jotta muutokset tulevat voimaan. 

Käytä Google-fonttia mukautetussa koodatussa sähköpostimallissa

Google-fontit ovat tuettuja Apple Mailissa ja muutamissa muissa sähköpostiohjelmissa, mutta laaja tuki on rajoitettua. Suosituimmat sähköpostiohjelmat tukevat vain oletusarvoisia verkkofontteja. Lue lisää klassisessa sähköpostieditorissa käytettävien oletusfonttien valitsemisesta. 

Google-fontin lisääminen mukautettuun koodattuun sähköpostimalliin: 

1. Kopioi fontin @import-koodi Google Fontsista.
2. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
3. Avaa mukautettu koodattu sähköpostimalli hakutoiminnossa.
4. Liitä @import-koodi mallin<head> -osioon <style>....</style> -tagien väliin. 
5. Lisää mallin <body> -osioon mukautettu fontti inline-tyylillä. 
6. Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset tulevat voimaan. 

Käytä Google-fonttia CTA:ssa (vanha versio)

1. Kopioi Googlen koodi kyseisen fontin CSS-sääntöjen asettamiseksi.
2. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > CTA:t. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > CTA:t.
3. Vie hiiri CTA:n päälle ja napsauta sitten Toiminnot > Muokkaa. 
4. Napsauta oikeanpuoleisessa paneelissaLisäasetukset. 
5. Liitä tekstikenttään Googlen koodi kyseisen fontin CSS-sääntöjen määrittämiseksi. 
6. Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.

Käytä Google-fonttia lomakkeessa

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Lomakkeet. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Lomakkeet.
2. Vie hiiri lomakkeen nimen päälle ja napsauta Toiminnot > Muokkaa lomaketta tai Luo uusi lomake.
3. Napsauta lomakkeen muokkausnäkymässä Tyyli ja esikatselu -välilehteä. 
4. Napsauta vasemmassa sivupalkin valikossaTyyli-osiota.
5. NapsautaTeksti-osiossaFonttiperhe-pudotusvalikkoa ja valitseGoogle-fontti. 
6. Napsauta oikeassa yläkulmassaPäivitä taiJulkaise, jotta muutokset tulevat voimaan. 

Käytä Google-fonttia mukautetussa moduulissa

Huomaa: Google-fontit eivät ole käytettävissä sähköpostimalleissa käytettävissä mukautetuissa moduuleissa.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakukoneessa mukautetun moduulin nimeä. Lue lisää mukautetun moduulin luomisesta.
3. Napsauta tarkastelutyökalussaKentät-osion Lisää kenttä -pudotusvalikkoaja valitse Fontti. Lue lisää fonttikenttien käytöstä.

4. Napsauta oikeassa yläkulmassa Julkaise muutokset, jottamuutokset tulevat voimaan. 
5. Siirry sisältöösi:
   • Verkkosivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Verkkosivuston sivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Verkkosivuston sivut.
   • Aloitussivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Aloitussivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Aloitussivut.
   • Blogi: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Blogi. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Blogi.
6. Napsauta sisällön nimeä mukautetun moduulin avulla. 
7. Napsauta sisältöeditorissamukautettua moduulia. 
8. Napsauta sivupalkin editorissaFont-kentän avattavaavalikkoa ja valitseGoogle Font. 

Käytä mukautettuja fontteja

Vaihtoehtona tavallisten verkkofonttien taiGoogle Fontsin kaltaisten fonttikirjastojen käytölle voit ladata fonttitiedostoja ja käyttää niitä teemoissa tai viitata niihin tyylitiedostoissa.

Käytä mukautettuja fontteja teemoissa

Lataa teemaeditorissa mukautettu fontti ja käytä sitä sivuilla ja viesteissä. Fonttitiedostot tuetaan seuraavissa muodoissa: TTF, OTF, WOFF.

Lataa mukautettuja fontteja sivuille tai

viesteihin Kun olet ladannut mukautetut fontit, ne ovat käytettävissä sivuilla, viesteissä tai tietokannan artikkeleissa.

1. Siirry sisältöösi:

   • Verkkosivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Verkkosivuston sivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Verkkosivuston sivut.
   • Aloitussivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Aloitussivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Aloitussivut.
   • Blogi: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Blogi. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Blogi.
2. Napsauta sisällön nimeä. 
3. Napsauta sisältöeditorissaMuokkaa-valikkoaja valitseTeema: [Teeman nimi].
4. Napsauta vasemmassa sivupalkin valikossa mitä tahansa fonttienpudotusvalikkoa ja valitseHallitse brändin fontteja.
5. Seuraa tämän tietokannan artikkelin ohjeita fonttien lisäämiseksi tai muokkaamiseksi.

Lataa mukautetut fontit tietokannan artikkeleita varten

Kun olet ladannut mukautetut fontit, ne ovat käytettävissä sivuilla, viesteissä tai tietokannan artikkeleissa.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Palvelu > Tietämyskanta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Palvelu > Tietämyskanta.
2. Napsauta oikeassa yläkulmassaMukauta mallia.
3. Napsauta vasemmassa sivupalkissa Suunnittelu -välilehteä.
4. Napsauta vasemmassa sivupalkissa Fonttityylit.
5. Napsauta mitä tahansa fontinavattavaa valikkoa ja valitseHallitse brändifontteja.
6. Seuraa tämän tietokannan artikkelin ohjeita fonttien lisäämiseksi tai muokkaamiseksi.

Muokkaa mukautettuja fontteja

Kun olet ladannut mukautetun fontin teemaeditoriin, voit ladata lisää fontteja, mukauttaa olemassa olevia fontteja lisäfonttityyleillä tai poistaa fontteja.

Mukautettujen fonttien käyttö tyylitiedostoissa

Vaihtoehtona tavallisten verkkofonttien taiGoogle Fontsin kaltaisten fonttikirjastojen käytölle voit tallentaa fonttitiedostot tiedostotyökaluun ja viitata niihin tyylitiedostossasi.

Huomaa: mukautetutfontit ovat käytettävissä vain tileillä, joilla on pääsy Design Manager -työkaluun, ja ne on otettava käyttöön CSS:n avulla. Mukautetun fontin lisääminenei lisää fonttia sisältöeditorin tyylivalikoihin.

Jos haluat käyttää fonttia sisällössä, lataa fonttitiedostot tiedostotyökaluun. On suositeltavaa ladata vähintään fontin .woff-,.ttf- ja .eot-versiot , jotta fontti latautuu kaikkiin selaimiin. Voit käyttääFont Squirrelin muuntotyökalun asiantuntijatilaa luodaksesi lisää tiedostomuotoja.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Tiedostot. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Tiedostot.
2. NapsautaLataa tiedostot.
3. Valitsefonttitiedostot tietokoneesi kiintolevyltä ja napsauta sittenAvaa.
4. Napsauta ladatun fonttitiedoston nimeä.
5. Napsauta oikeanpuoleisessa paneelissaKopioi URL kopioidaksesi tiedoston sijainnin URL-osoitteen. Tarvitset fontin URL-osoitteen jokaisessa tiedostomuodossa.

Käytä mukautettua fonttia tyylitiedostossa

Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit viitata siihen tyylitiedostossa. Jokainen fonttityyli (kursiivi, lihavoitu jne.) vaatii erillisen @font-face-säännön. Lue lisää tyylitiedostojen käytöstä HubSpotissa. 

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa hakukoneessa sisältösi tyylitiedosto.
3. Jokaiselle fonttityylille: 
   • Liitä seuraava koodi tyylitiedoston yläosaan: 

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


• • Korvaa Your Font Name fontin nimellä.
  • Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaiselle tiedostomuodolle.

4. Luo CSS-säännöt font-family -ominaisuudella mukautetun fontin käyttöönottoa varten. 
5. Napsauta oikeassa yläkulmassa Päivitä taiJulkaise, jotta muutokset tulevat voimaan. 

Käytä mukautettua fonttia sähköpostissa vedä ja pudota -sähköpostieditorissa

Mukautetut sähköpostifontit tuetaan Apple Mailissa ja osittain Samsung Mailissa. Mukautettuja fontteja ei tueta Gmailissa, Outlookissa tai useimmissa mobiiliselaimissa. Jotta lukijoillesi taataan yhdenmukainen kokemus, suosittelemme käyttämään sähköposteissa oletusfontteja.

Jos kuitenkin haluat lisätä mukautetun fontin sähköpostiin vedä ja pudota -sähköpostieditorissa, voit tehdä sen lataamalla mukautetun fontin brändipakettiisi ja asettamalla varafontin. 

1. Lisää mukautettu fontti brändipakettiisi ja valitse sitten varafontti, joka on lähinnä mukautettua fonttiasi. Vältä varafontteihin liittyviä ongelmia seuraavasti:  
   • Käytä varafontteja, joiden x-korkeus ja paksuus ovat samanlaiset kuin mukautetussa fontissasi.
   • Esikatsele markkinointisähköposteja useissa eri sähköpostiohjelmissa nähdäksesi, mitä fontteja käytetään.
   • Varmista, että kaikki tärkeät elementit näkyvät odotetusti varafonttien kanssa.
2. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Sähköposti. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Sähköposti.
3. Napsautamarkkinointisähköpostin nimeätai napsautaLuo sähköposti luodaksesi uuden sähköpostin.
4. Voit käyttää mukautettua fonttia tekstin, kuten kappaleiden tai otsikoiden, muotoiluun seuraavasti:
   • Napsauta sähköpostieditorissa vasemmassa sivupalkissa olevaa mallisuunnittelukuvaketta.
   • Aseta Napsauta Tekstityylit-osiossaavattavaa valikkoa javalitsefonttiMukautetut fontit-osiosta.

5. Mukautetun fontin käyttäminen rich text -moduulissa: 
   • Korosta tekstiä rich text -moduulissa sähköpostieditorissa.
   • Napsauta rich text -editorissafontin pudotusvalikkoa, vie hiiri kohtaanMukautetut fontit, valitse sitten mukautettu fontti ja valitsefontin paksuus.

6. Kirjoita sähköpostin sisältö ja esikatsele sähköpostia useissa asiakasohjelmissa.
7. Viimeistele ja lähetä sähköposti.

Käytä mukautettua fonttia mukautetussa sähköpostimallissa

Mukautetut fontit ovat tuettuja Apple Mailissa ja osittain tuettuja Samsung Mailissa. Mukautettuja fontteja ei tueta Gmailissa, Outlookissa tai useimmissa mobiiliselaimissa. Jotta lukijoillesi taataan yhdenmukainen kokemus, on suositeltavaa käyttää sähköposteissa oletusfontteja.

Jos kuitenkin haluat lisätä mukautetun fontin mukautettuun sähköpostimalliin, voit tehdä sen, kun olet lisännyt fontin tiedostotyökaluun.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta Finderissa mukautetun sähköpostimallin nimeä.
3. Jokaiselle fonttityylille:
   • Liitä tämä koodi mallin <head> -osioon <style>....</style> -tagien väliin: 

@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. • Korvaa Your Font Name fontin nimellä.
   • Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaiselle tiedostomuodolle. 

4. Lisää mukautettu fontti sähköpostin tekstin koodiin inline-tyylillä. 
5. Napsauta oikeassa yläkulmassa Päivitä taiJulkaise, jotta muutokset tulevat voimaan. 

Käytä mukautettua fonttia

CTA

:ssa

Kun olet lisännyt mukautetun fontin teemaasi, voit käyttää sitä CTA:issa.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > CTA:t. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > CTA:t.
2. Napsauta vasemmassa yläkulmassa avattavaa valikkoa ja valitse CTA:t
3. Vie hiiri CTA:n päälle ja napsauta Toiminnot > Muokkaa. 
4. Napsauta CTA-editorin vasemmassa paneelissa Suunnittelu-välilehteä. 
5. Napsauta Tyylit-osiota laajentaaksesi sen.
6. Napsauta Ensisijainen fontti -pudotusvalikkoa ja valitse mukautettu fontti. 
7. Jatka CTA:n luomista. 

Mukautetun fontin käyttö CTA:ssa (

vanha

versio)

Kuten CTA:issa, voit käyttää mukautettua fonttitiedostoa vanhoissa CTA:issa sen lataamisen jälkeen.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > CTA:t. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > CTA:t.
2. Vie hiiri CTA:n päälle ja napsauta sitten Toiminnot > Muokkaa. 
3. Napsauta oikeanpuoleisessa paneelissaLisäasetukset. 
4. Liitä tekstikenttään seuraava koodi:
   
   font-family: 'Your Font Name';
5. Korvaa fontin nimifontin nimellä.
6. Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.

Käytä mukautettua fonttia mukautetussa moduulissa

Kun olet lisännyt mukautetun fontin tiedostotyökaluun, käytä sitä mukautetuissa blogi- tai sivumoduuleissa. Opi lisäämään mukautettu fontti mukautettuun sähköpostimalliin. 

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakuk oneessa mukautetun moduulin nimeä.
3. Liitä moduulin muokkausnäkymänmodule.css -osioon seuraava koodi:

@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. • Korvaa Your Font Name fontin nimellä.
   • Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaiselle tiedostomuodolle.
6. Luo CSS-säännöt font-family -ominaisuudella mukautetun fontin käyttöönottamiseksi. 
7. Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset tulevat voimaan.