Käytä fontteja HubSpotissa

HubSpotissa fontit ovat käytettävissä eri tavoin sisältötyypin ja fonttityypin mukaan. Joitakin oletusfontteja on käytettävissä kaikissa sisällönmuokkausohjelmissa. Verkkofontit ja mukautetut fontit saatetaan joutua lisäämään teeman asetuksiin, tyylitiedostoihin, mukautettuihin moduuleihin tai koodattuihin malleihin.

Ennen kuin aloitat

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

Rajoitusten ja näkökohtien ymmärtäminen

• Kaikki sisältötyypit eivät ole käytettävissä kaikissa tileissä. Voit tarkistaa, mitkä sisältötyypit ovat käytettävissä tilaus, arvostelu Tuote & -palveluvalikoimaan.
• Arvostelu alla olevaan taulukkoon, jotta saat selville, mitkä fonttivaihtoehdot ovat käytettävissä kunkin sisältötyypin kohdalla:

Käytä oletusfontteja rich text -moduuleissa

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

1. Siirry sisältöön:

   • Verkkosivusto: 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 merkitse sitten teksti, jota haluat muokata. 
4. Napsauta RTF-työkalurivilläFontti-pudotusvalikkoa ja 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ä rikastekstieditorin Fontti -pudotusvalikossa. Sisältötyypistä riippuen verkkofontteja voidaan ottaa käyttöön teeman asetuksissa, tyylitiedostoissa, mukautetuissa moduuleissa tai koodatuissa malleissa. 

Kehittäjät voivat käyttää fonttikenttää lisätäkseen verkkofontteja teemoihin ja mukautettuihin moduuleihin. Kun verkkofontteja lisätään tällä tavalla, HubSpot lataa ne suoraan sisällön verkkotunnus sen sijaan, että ne ladattaisiin kolmannen osapuolen palvelusta.

Käytä kolmannen osapuolen palveluita, kuten Google Fontsia , kopioimalla fontin tuonti, liittämällä se sisällön tyylitiedostoon ja ottamalla fontti käyttöön CSS avulla:

1. Siirry osoitteeseen fonts.google.com.
2. Kirjoita hakupalkkiinfontin nimi. 
3. Napsauta fontin nimeä nähdäksesi luettelo tuonti varten käytettävissä olevista tyyleistä.
4. Napsauta oikeassa yläkulmassa olevaa ”Hanki fontti” -painiketta.
5. Napsauta oikeassa yläkulmassa olevaa ”Hae upotuskoodi” -painiketta.
6. Valitse oikeanpuoleisesta sarakkeesta Web -välilehdeltä tuonti .
7. Kopioi tuonti -koodi ilman <style> tunniste.
8. KopioiCSS -luokan koodi CSS -sääntöjen määrittämistä varten. 

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

• • Google-fontin käyttö tyylitiedostossa
  • Google-fontin käyttö itse koodatussa mallipohja
  • Google-fontin käyttö CTA -painikkeessa (vanha versio)
  • Google-fontin käyttö l lomake akkeessa
  • Google-fontin käyttö mukautetussa moduulissa

Google-fontin käyttö tyylitiedostossa

1. Kopioi fontin tuonti -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 Finderissa sisältösi tyylitiedosto.
4. Liitä tuonti -koodi tyylitiedoston ensimmäiselle riville . 
5. Lisää koodi, jolla CSS määritetään tyylitiedoston asianmukaisille valitsimille.
6. Napsauta oikeassa yläkulmassa olevaaJulkaise muutokset -painiketta, jotta muutokset tulevat voimaan. 

Google-fontin käyttö itse koodatussa mallipohja

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

Google-fontin lisääminen itse koodattuun mallipohja: 

1. Kopioi fontin tuonti -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 Finderissa itse koodattu mallipohja.
4. Lisää<head> mallipohja osioon liitä tuonti -koodi <style>....</style> -tagien väliin. 
5. Lisää mallipohja ” <body> ”-osioon mukautettu fontti inline-tyylillä. 
6. Napsauta oikeassa yläkulmassa olevaa Julkaise muutokset-painiketta, jotta muutokset tulevat voimaan. 

Google-fontin käyttö CTA -painikkeessa (vanha versio)

1. Kopioi Googlen koodi, jolla kyseiselle fontille määritetään CSS.
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 painikkeen päälle ja napsauta sitten Toiminnot- valik>Muokkaa. 
4. Napsauta oikeanpuoleisessa paneelissa”Lisäasetukset”. 
5. Liitä tekstikenttään Googlen koodi, jolla määritetään kyseisen fontin CSS. 
6. Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.

Google-fontin käyttö l lomake akkeessa

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 lomake nimen päälle ja napsauta Toiminnot > Muokkaa lomaketta tai Luo uusi lomake.
3. Napsauta lomake muokkausnäkymässä Tyyli- & -esikatselu -välilehteä. 
4. Napsauta vasemmassa sivupalkin valikossaTyyli-osiota.
5. NapsautaTeksti-osiossaFonttiperhe-pudotusvalikkoa ja valitseGoogle-fontti. 
6. Napsauta oikeassa yläkulmassaPäivitä- taiJulkaise- painiketta, jotta muutokset tulevat voimaan. 

Google-fontin käyttö mukautetussa moduulissa

Huomaa: Google Fonts -fontteja ei voi käyttää sähköpostimallien 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 Finderissa 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 olevaa Julkaise muutokset-painiketta, jottamuutokset tulevat voimaan. 
5. Siirry sisältöön:
   • Verkkosivusto: 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.
6. Napsauta sisällön nimeä mukautetun moduulin avulla. 
7. Napsauta sisältöeditorissamukautettua moduulia. 
8. Napsauta sivupalkin muokkausnäkymässäFontti-kentän avattavaavalikkoa ja valitseGoogle-fontti. 

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 teemaeditoriin mukautettu fontti ja käytä sitä sitten sivuilla ja viesteissä. Seuraavat fonttitiedostomuodot ovat tuettuja: TTF, OTF, WOFF.

Lataa mukautettuja fontteja sivuille tai julkaisuihin

Kun olet ladannut mukautetut fontit, ne ovat käytettävissä sivuilla, julkaisuissa ja tietämyskanta artikkeleissa.

1. Siirry sisältöön:

   • Verkkosivusto: 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.
2. Napsauta sisällön nimeä . 
3. Napsauta sisältöeditorissaMuokkaa-valikkoaja valitseTeema: [Teeman nimi].
4. Napsauta vasemmassa sivupalkin valikossa mitä tahansa fonttienpudotusvalikkoa ja valitse”Hallitse brändi fontteja”.
5. Lisää tai muokkaa fontteja noudattamalla tämän tietokanta-artikkelin ohjeita .

Lataa mukautettuja fontteja tietämyskanta artikkeleihin

Kun olet ladannut mukautetut fontit, ne ovat käytettävissä sivuilla, julkaisuissa ja tietämyskanta 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äkulmassa olevaaMukauta mallipohja-painiketta.
3. Napsauta vasemmassa sivupalkissa Suunnittelu -välilehteä.
4. Napsauta vasemmassa sivupalkissa kohtaa ”Fonttityylit”.
5. Napsauta mitä tahansafonttivalikkoa ja valitse”Hallitse brändi fontteja”.
6. Lisää tai muokkaa fontteja noudattamalla tämän tietokanta-artikkelin ohjeita .

Muokkaa mukautettuja fontteja

Kun olet ladannut mukautetun fontin teemamuokkaajaan, voit ladata lisää fontteja, mukauttaa olemassa olevia fontteja lisäämällä niihin uusia fonttityylejä tai poistaa fontteja.

Käytä mukautettuja fontteja tyylitiedostoissa

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

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

Jos haluat käyttää fonttia sisällössä, lataa fontin tiedostot tiedostotyökaluun. On suositeltavaa ladata fontista ainakin .woff-,.ttf- ja .eot-versiot , jotta fontti latautuu varmasti kaikissa selaimissa. Voit käyttääFont Squirrelin muuntotyökalun Expert-tilaa luodaksesi muita 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. Napsauta”Lataa tiedostot”.
3. Valitse tietokoneen kiintolevyltäfonttitiedostot ja napsauta sittenAvaa.
4. Napsauta ladatun fonttitiedoston nimeä .
5. Napsauta oikeanpuoleisessa paneelissaKopioi URL -painiketta kopioidaksesi sen URL-osoitteen, jossa tiedosto sijaitsee. Tarvitset fontin URL-osoitteen jokaisessa tiedostomuodossa.

Mukautetun fontin käyttö tyylitiedostossa

Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit viitata siihen tyylitiedostossa. Jokainen fonttityyli (kursiivi, lihavoitu jne.) vaatii oman @font-face -säännön. Lue lisää tyylitaulukoiden 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 Finderissa sisältösi tyylitiedosto.
3. Jokaiselle fonttityylille: 
   • Liitä seuraava koodi tyylitiedoston alkuun: 

@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 ”Font Name” fontin nimellä.
  • Korvaayour_font_file.xxx?tiedostotyökalusta löytyvälläURL-osoitteella . Toista tämä jokaisen tiedostomuodon kohdalla.

4. Luo CSS -säännöt font-family ominaisuus avulla, jotta voit ottaa käyttöön mukautetun fontin. 
5. Napsauta oikeassa yläkulmassa Päivitä- taiJulkaise- painiketta, jotta muutokset tulevat voimaan. 

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

Apple Mail tukee mukautettuja sähköpostifontteja, ja Samsung Mail tukee niitä osittain. Gmail, Outlook tai useimmat mobiiliselaimet eivät tue mukautettuja fontteja. Jotta lukijoillesi taataan yhdenmukainen käyttökokemus, on suositeltavaa käyttää sähköposteissa oletusverkkofontteja.

Jos kuitenkin haluat lisätä mukautetun fontin sähköpostiin vedä ja pudota -tyyppisessä sähköpostieditorissa, voit tehdä sen lataamalla mukautetun fontin brändipaketti ja määrittämällä varafontin. 

1. Lisää mukautettu fontti brändipaketti ja valitse sitten se varafontti, joka muistuttaa eniten mukautettua fonttiasi. Jotta vältytään varafontteihin liittyviltä ongelmilta:  
   • Käytä varafontteja, joiden x-korkeus ja paksuus ovat samanlaiset kuin mukautetun fonttisi.
   • Esikatsele markkinointiviestejä eri sähköpostiohjelmissa nähdäksesi, mitkä fontit niissä näkyvät.
   • Varmista, että kaikki tärkeät elementit näkyvät odotetulla tavalla varafonttien avulla.
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 -painiketta luodaksesi uuden sähköpostin.
4. Jos haluat käyttää mukautettua fonttia tekstin osien, kuten kappaleiden tai otsikoiden, muotoiluun:
   • Napsauta sähköpostieditorissa vasemmassa sivupalkissa olevaa mallipohja suunnittelukuvaketta.
   • Asetuksen määrittämiseksi 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 hiiren osoitin kohtaan”Mukautetut fontit”, siirrä osoitin sitten haluamasi mukautetun fontin päälle ja valitsefontin paksuus.

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

Mukautetun fontin käyttö itse koodatussa mallipohja

Apple Mail tukee mukautettuja fontteja, ja Samsung Mail tukee niitä osittain. Gmail, Outlook tai useimmat mobiiliselaimet eivät tue mukautettuja fontteja. Jotta lukijoillesi taataan yhdenmukainen käyttökokemus, on suositeltavaa käyttää sähköposteissa oletusverkkofontteja.

Jos kuitenkin haluat lisätä mukautetun fontin itse koodattuun mallipohja, 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 itse koodaamasi mallipohja nimeä .
3. Jokaiselle fonttityylille:
   • Liitä mallipohja osiossa ” <head> ” tämä koodi <style>....</style> -merkkien 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 ”Font Name” fontin nimellä.
   • Korvaayour_font_file.xxx?tiedostotyökalusta löytyvälläURL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla. 

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

Käytä mukautettua fonttia CTA-painikkeessa

Kun olet lisännyt mukautetun fontin teemaasi, voit käyttää sitä CTA-painikkeissa.

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 olevaa avattavaa valikkoa ja valitse CTA:t
3. Vie hiiri CTA päälle ja napsauta sitten Toiminnot > Muokkaa. 
4. Napsauta CTA editorin vasemmassa paneelissa Suunnittelu- välilehteä. 
5. Napsauta Tyylit-osiota avataksesi sen.
6. Napsauta Ensisijainen fontti -pudotusvalikkoa ja valitse haluamasi fontti. 
7. Jatka CTA:n luomista.  

Mukautetun fontin käyttö CTA -painikkeessa (vanha versio)

Samoin kuin CTA-painikkeiden kohdalla, kun olet ladannut mukautetun fonttitiedoston, voit käyttää sitä vanhojen CTA-painikkeiden kanssa.

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 päälle ja napsauta sitten Toiminnot > Muokkaa. 
3. Napsauta oikeanpuoleisessa paneelissa”Lisäasetukset”. 
4. Liitä tämä koodi tekstikenttään:
   
   font-family: 'Your Font Name';
5. Korvaa ”Font Name”fontin nimellä.
6. Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.

Mukautetun fontin käyttö mukautetussa moduulissa

Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit käyttää sitä mukautetuissa blogi- tai sivumoduuleissa. Opi lisäämään mukautettu fontti itse koodattuun mallipohja.  

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 moduulin nimeä .
3. Liitä moduulieditorinmodule.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 ”Font Name” fontin nimellä.
   • Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla.
6. Luo CSS -säännöt font-family ominaisuus avulla, jotta voit ottaa käyttöön mukautetun fontin. 
7. Napsauta oikeassa yläkulmassa olevaa Julkaise muutokset-painiketta, jotta muutokset tulevat voimaan.