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: Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
   • Sähköposti: Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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öpostimallien mukautetuissa moduuleissa.

1. Siirry HubSpot-tililläsi 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: Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Aloitussivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
   • Blogi: Siirry HubSpot-tililläsi 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: Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Aloitussivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
   • Blogi: Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi kohtaan Sisältö > Tiedostot. Jos käytät HubSpotin ilmaisia työkaluja, siirry kohtaan Markkinointi > Sähköposti. Napsauta oikeassa ylälaidassa Sähköpostityökalut ja valitse 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. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa hakuk oneessa 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 mukautetussa koodatussa sähköpostimallissa

Mukautettuja fontteja ei tueta useimmissa suosituissa sähköpostiohjelmissa. Jotta lukijoillesi taataan yhdenmukainen kokemus, on suositeltavaa käyttää sähköposteissa oletusfontteja. Jos kuitenkin haluat lisätä mukautetun fontin mukautettuun koodattuun sähköpostimalliin, voit tehdä sen, kun olet lisännyt fontin tiedostotyökaluun.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakuk oneessa mukautetun koodatun sähköpostimallisi nimeä.
3. Jokaiselle fonttityylille:
   • Liitä tämä koodi mallin <head> -osioon <style>....</style> -tunnisteiden 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. Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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. Siirry HubSpot-tililläsi 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öönottoa varten. 
7. Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset tulevat voimaan.