HubSpotin sisällössä käytettävissä olevat fontit riippuvat sisällön tyypistä ja kirjasintyypistä. Tietyt oletusfontit ovat käytettävissä kaikissa sisältöeditoreissa, kun taas web-fonteilla (kuten Google Fonts) ja mukautetuilla fonteilla on lisärajoituksia, jotka on esitetty alla:
| Sisältötyyppi |
Kirjasintyyppi |
| Oletusfontit |
Web-fontit |
Mukautetut fontit |
| Sivu - teemamallit |
✓ |
Käytettävissä teema-asetuksissa ja tyylitaulukon kautta |
✓ |
| Sivu - koodattu malli |
✓ |
Käytettävissä tyylitaulukon tai mukautetun moduulin kautta |
Käytettävissä tyylitaulukon kautta |
| Blogi |
✓ |
Käytettävissä tyylitaulukon tai mukautetun moduulin kautta |
✓ |
| Sähköposti |
Joitakin oletusfontteja ei ole saatavilla sähköpostieditorissa, joka on vedä ja pudota |
Käytettävissä vain mukautetuille koodatuille sähköpostimalleille; ei tuettu useimmissa sähköpostiohjelmissa. |
Käytettävissä vain mukautetuille koodatuille sähköpostimalleille; ei tuettu useimmissa sähköpostiohjelmissa. |
| Tietopohja |
✓ |
Käytettävissä mallieditorin Design-välilehdellä |
Ei saatavilla |
| Mukautettu moduuli |
✓ |
Käytettävissä mukautetuille moduuleille, joita ei käytetä sähköposteissa |
Käytettävissä mukautetuille moduuleille, joita ei käytetä sähköposteissa |
| CTA (vanha) |
✓ |
✓ |
✓ |
| CTA |
✓ |
✓ |
✓ |
Huomaa: kaikki sisältötyypit eivät ole käytettävissä kaikilla tileillä.HubSpot-tilisi tilauksissa käytettävissä olevat sisältötyypit löytyvät tuote- ja palveluluettelosta.
Käytä oletusfontteja
Oletusfontteja voidaan käyttää kaikentyyppisessä sisällössä, ja ne on suunniteltu latautumaan useimmilla alustoilla ja laitteilla.
-
Siirry sisältöön:
- Verkkosivut:
- Laskeutumissivut:
- Blogi:
- Tietopohja:
- Sähköposti:
- Napsauta sisällön nimeä.
- Napsauta sisältöeditorissa rikkaan tekstin moduulia ja korosta sitten teksti, jota haluat muokata.
- Napsauta rikkaan tekstin työkalurivillä Fontti-pudotusvalikkoa ja valitse fontti. Seuraavat fontit ovat käytettävissä rikkaan tekstin moduuleissa:
-
Andale Mono*
-
Arial
-
Book Antiqua*
-
Courier New
-
Georgia
-
Helvetica
-
Impact*
- Lato**
- Merriweather**
-
-
Symboli*
-
Tahoma
-
Terminaali*
-
Times New Roman
-
Trebuchet MS
-
Verdana
*Ei ole käytettävissä vedä ja pudota -sähköpostieditorissa.
**Vain saatavilla web-fonttina sähköpostieditorissa.
Käytä web-fontteja
Verkkokirjasimet ovat oletusarvoisesti käytettävissä sisällönmuokkaimessa sivuilla, joilla käytetään aloitusmalleja ja teemoja, sekä tietopohja-artikkeleissa ja mukautetuissa moduuleissa.
Jos olet kehittäjä, voit myös käyttää fonttikenttää lisätäksesi web-fontteja teemoihin ja mukautettuihin moduuleihin. Näillä tavoilla käytettäessä web-fontteja ei ladata kolmannen osapuolen palvelusta, vaan HubSpot lataa ne suoraan sisällön verkkotunnuksesta.
Huomaa: verkkofontteja ei voi valita tekstieditorin fonttipudotusvalikosta.
Voit myös käyttää kolmannen osapuolen palveluja, kuten Google Fontsia, kopioimalla fontin tuontikoodin, liittämällä sen sisällön tyylitaulukkoon ja soveltamalla fonttia CSS:n avulla:
- Siirry osoitteeseen fonts.google.com.
- Kirjoita hakupalkkiin fontin nimi.
- Napsauta fontin nimeä nähdäksesi luettelon tuotavissa olevista tyyleistä.
- Napsauta jokaisen tuotavan tyylin vieressä + Valitse tämä tyyli.
- Valitse oikeanpuoleisessa paneelissa @import kohdassa Use on the web .
- Kopioi fontin koodi:
- Kopioi @import-koodi ilman <style>-tunnistetta kohdassa Use on the web .
- Kopioi CSS-säännöt perheiden määrittämistä varten -kenttään CSS-sääntöjen asettamista koskeva koodi .
Kun olet saanut koodin Google Fontsista, voit lisätä fontin HubSpot-sisältöön:
Käytä Google-fonttia tyylitaulussa
- Kopioi fontin @import-koodi Google Fontsista.
- Avaa hakulaitteessa sisällössäsi käytetty tyylitaulukko.
- Liitä @import-koodi tyylitaulukon riville 1.
- Lisää koodi CSS-sääntöjen asettamista varten tyylitaulukon asianmukaisiin valintoihin.
- Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset otetaan käyttöön.
Käytä Google-fonttia mukautetussa koodatussa sähköpostimallissa
Mukautetut koodatut sähköpostimallit ovat käytettävissä vain tileillä, joilla on
Marketing Hub
Professional
tai
Enterprise -tilaus.
Google-fontin lisääminen mukautettuun koodattuun sähköpostimalliin:
Käytä Google-fonttia CTA:ssa (legacy)
Käytä Google-fonttia lomakkeessa
- Vie hiiren kursori lomakkeen nimen päälle ja valitse Toiminnot > Muokkaa lomaketta tai Luo uusi lomake.
- Napsauta lomakeeditorissa tyyli- ja esikatseluvälilehteä.
- Napsauta vasemmanpuoleisessa sivupalkin valikossa tyyli-osiota .
- Napsauta Teksti-osiossa Fonttiperhe-pudotusvalikkoa ja valitse Google-fontti.
- Napsauta oikeassa yläkulmassa Päivitä tai Julkaise ottaaksesi muutokset käyttöön.
Google-fontin käyttäminen mukautetussa moduulissa
Huomaa: Google Fonts ei ole käytettävissä sähköpostimalleissa käytettäviin mukautettuihin moduuleihin.
- Napsauta oikeassa yläkulmassa Julkaise muutokset , jotta muutokset otetaan käyttöön.
-
Siirry sisältöön:
- Verkkosivut:
- Laskeutumissivut:
- Blogi:
- Napsauta mukautettua moduulia käyttävän sisällön nimeä.
- Napsauta sisältöeditorissa mukautettua moduulia.
- Napsauta sivupalkin editorissa Font-kentän pudotusvalikkoa ja valitse Google-fontti.
Käytä mukautettuja fontteja
Vaihtoehtona tavallisten web-fonttien tai Google Fontsin kaltaisen kirjastokirjaston käyttämiselle voit ladata fonttitiedostoja ja käyttää niitä teemoissa tai viitata niihin tyylilomakkeissa.
Käytä mukautettuja fontteja teemoissa
Voit ladata teeman editoriin mukautetun fontin ja käyttää sitä sitten sivuilla ja viesteissä. Fonttitiedostoja tuetaan seuraavissa muodoissa: TTF, OTF, WOFF.
Lataa mukautettuja fontteja
-
Siirry sisältöön:
- Verkkosivut:
- Laskeutumissivut:
- Blogi:
- Napsauta sisällön nimeä.
- Napsauta sisältöeditorissa Muokkaa-valikkoa ja valitse Teema: [Teeman nimi].
- Napsauta vasemmanpuoleisessa sivupalkin valikossa fontin pudotusvalikkoa ja valitse Lataa mukautettu fontti.
- Kirjoita oikeassa paneelissa Fontin nimi -kenttään fontin nimi .
- Valitse Choose font files (Valitse fonttitiedostot ) ja valitse yksi tai useampi fonttitiedosto ja valitse sitten Next (Seuraava).
- Napsauta Font Style 1 -pudotusvalikkoa ja valitse fonttitiedostosi käyttämä tyyli . Jokaisen tyylin on käytettävä erillistä fonttitiedostoa.
- Jos haluat lisätä muita kirjasintyylejä, valitse + Lisää toinen kirjasintyyli ja lisää sitten kirjasintyylit. Jokaisella ladatulla fonttitiedostolla on oltava vähintään yksi siihen liittyvä tyyli.
- Kun olet lisännyt kaikki sovellettavat kirjasintyylit, napsauta Valmis.
Muokkaa mukautettuja fontteja
Kun olet ladannut mukautetun fontin teemaeditoriin, voit ladata lisää fontteja, muokata olemassa olevia fontteja uusilla kirjasintyyleillä tai poistaa fontteja.
-
Siirry sisältöön:
- Verkkosivut:
- Laskeutumissivut:
- Blogi:
- Napsauta sisällön nimeä.
- Napsauta sisältöeditorissa Muokkaa-valikkoa ja valitse Teema: [Teeman nimi].
- Laajenna vasemmanpuoleisessa sivupalkin valikossa Fonts-osiota napsauttamalla sitä.
- Napsauta -pudotusvalikkoa ja valitseManage custom fonts.
- Voit lisätä uuden fontin valitsemalla valintaikkunassa Lisää mukautettu fontti .
- Fontin muokkaaminen:
- Napsauta valintaikkunassa fontin vieressä olevaa Toiminnot-pudotusvalikkoa ja valitse Muokkaa.
- Jos haluat muuttaa fontin nimeä, napsauta fontin nimen vieressä olevaa Muokkaa-painiketta ja kirjoita sitten uusi fontin nimi.
- Jos haluat lisätä lisää fonttityylejä, napsauta Lisää toinen fonttityyli, napsauta sitten Fontin tyyli -pudotusvalikkoa ja valitse tyyli. Napsauta Upload (Lataa) ja lataa sitten fonttitiedosto.
- Jos haluat poistaa fonttityylin, napsauta fonttityylin vieressä olevaa deletededel Poista-kuvaketta . Et voi poistaa kirjasintyyliä, jos muita kirjasintyylejä ei ole luettelossa.
- Napsauta Tallenna.
- Voit poistaa fontin napsauttamalla valintaikkunan Toiminnot-pudotusvalikkoa ja valitsemalla Poista.
Huomaa: fontin poistaminen poistaa sen kaikista pudotusvalikoista, mutta fonttitiedostot pysyvät tiedostotyökalussa, kunnes ne poistetaan sieltä.
- Kun olet valmis muokkaamaan fontteja, valitse Valmis.
Mukautettujen fonttien käyttäminen tyylitaulukoissa
Vaihtoehtona tavallisten web-fonttien tai Google Fontsin kaltaisen fonttikirjaston käyttämiselle voit isännöidä fonttitiedostoja tiedostotyökalussa ja viitata niihin sitten tyylitaulussa.
Huomaa: mukautetut fontit ovat käytettävissä vain tileillä, joilla on pääsy suunnittelunhallintaan, ja ne on sovellettava CSS:llä. Mukautetun fontin lisääminen ei lisää fonttia sisältöeditorin pudotusvalikoihin.
Jos haluat käyttää fonttia sisällössä, lataa fontin tiedostot tiedostotyökaluun. On suositeltavaa ladata vähintään .woff-, .ttf- ja .eot-versiot fontista, jotta fontti latautuu kaikissa selaimissa. Voit käyttää Font Squirrelin muuntotyökalun Expert-tilaa muiden tiedostomuotojen luomiseen.
- Napsauta Lataa tiedostoja.
- Valitse tietokoneen kiintolevyltä fonttitiedostot ja napsauta sitten Avaa.
- Napsauta ladatun fonttitiedoston nimeä.
- Napsauta oikeassa paneelissa Kopioi URL-osoite kopioidaksesi URL-osoitteen, jossa tiedosto sijaitsee. Tarvitset fontin URL-osoitteen kussakin tiedostomuodossa.
Mukautetun fontin käyttäminen tyylitaulukossa
Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit viitata siihen tyylitaulukossa. Jokainen kirjasintyyli (kursivointi, lihavointi jne.) vaatii erillisen @font-face-säännön. Lue lisää tyylilomakkeiden kanssa työskentelystä HubSpotissa.
- Avaa etsimessä sisällössäsi käytetty tyylitaulukko.
- Kunkin kirjasintyylin osalta:
- Liitä seuraava koodi tyylitaulukon 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 Fontin nimi fontin nimellä.
- Korvaa your_font_file.xxx? tiedostotyökalun URL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla.
- Luo CSS-sääntöjä font-family-ominaisuudella mukautetun fontin käyttämiseksi.
- Napsauta oikeassa yläkulmassa Päivitä tai Julkaise ottaaksesi muutokset käyttöön.
Käytä mukautettua fonttia mukautetussa koodatussa sähköpostimallissa
Useimmat suositut sähköpostiohjelmat eivät tue mukautettuja fontteja. Jotta lukijasi saisivat yhdenmukaisen kokemuksen, on suositeltavaa käyttää sähköposteissa oletusarvoisia web-fontteja. Jos kuitenkin haluat lisätä mukautetun fontin mukautettuun koodattuun sähköpostimalliin, voit tehdä sen, kun olet lisännyt mukautetun fontin tiedostotyökaluun.
- Avaa hakulaitteessa mukautettu koodattu sähköpostimalli.
- Kunkin kirjasintyylin osalta:
- 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');}
-
- Korvaa Fontin nimi fontin nimellä.
- Korvaa your_font_file.xxx? tiedostotyökalun URL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla.
- Lisää mukautettu fontti sähköpostin rungon koodiin rivin muotoilussa.
- Napsauta oikeassa yläkulmassa Päivitä tai Julkaise ottaaksesi muutokset käyttöön.
Käytä mukautettua fonttia CTA:ssa
Kun olet lisännyt teemaan mukautetun fontin, voit käyttää sitä CTA-kohteissa:
- Napsauta vasemmassa yläkulmassa pudotusvalikkoa ja valitse CTA:t.
- Vie hiiren kursori CTA:n päälle ja valitse sitten Toiminnot > Muokkaa.
- Napsauta CTA-editorin vasemmassa paneelissa Design-välilehteä.
- Laajenna tyylit-osiota napsauttamalla sitä.
- Napsauta Ensisijainen fontti -pudotusvalikkoa ja valitse mukautettu fontti.
- Jatka CTA:n luomista.
Käytä mukautettua fonttia CTA:ssa (vanha)
Samoin kuin CTA:iden kohdalla, kun olet ladannut mukautetun lomaketiedoston, voit käyttää sitä vanhojen CTA:iden kanssa:
- Vie hiiren kursori CTA:n päälle ja valitse sitten Toiminnot > Muokkaa.
- Valitse oikeassa paneelissa Lisäasetukset.
- Liitä tämä koodi tekstiruutuun:
font-family: 'Your Font Name';
- Korvaa Fontin nimi fontin nimellä.
- Napsauta oikeassa alakulmassa Seuraava. Napsauta sitten Tallenna.
Mukautetun fontin käyttäminen mukautetussa moduulissa
Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit käyttää sitä mukautetuissa blogi- tai sivumoduuleissa. Opi lisäämään mukautettu fontti mukautettuun koodattuun sähköpostimalliin.
- Avaa mukautettu moduuli hakemistossa.
- Liitä module.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');}
- Korvaa Fontin nimi fontin nimellä.
- Korvaa your_font_file.xxx? tiedostotyökalun URL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla.
- Luo CSS-sääntöjä font-family-ominaisuudella mukautetun fontin käyttämiseksi.
- Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset otetaan käyttöön.