Käytä fontteja HubSpotissa
Päivitetty viimeksi: huhtikuuta 20, 2022
Tämä koskee seuraavia:
Kaikki tuotteet ja HubSpot-tilaukset |
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 Google Fonts -fonteilla ja mukautetuilla fonteilla on lisärajoituksia, jotka on esitetty alla:
Sisältötyyppi | Kirjasintyyppi | |||
Oletusfontit | Google Fonts |
Mukautetut fontit |
||
Sivu - aloituspohjat | ✓ | Käytettävissä sisältöeditorin Suunnittelu-välilehdellä | Ei saatavilla | |
Sivu - teemamallit | ✓ | Käytettävissä teema-asetuksissa ja tyylitaulukon kautta | Käytettävissä 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 | Käytettävissä tyylitaulukon 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ä mallieditorinDesign-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 | ✓ | ✓ | ✓ |
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: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Verkkosivuston sivut.
- Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Aloitussivut.
- Blogi: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Blogi.
- Tietopohja: Siirry HubSpot-tililläsi kohtaan Asiakaspalvelu > Tietämyskanta.
- Sähköposti: Siirry HubSpot-tililläsi kohtaan Markkinointi > Sähköposti.
- Vie hiiren kursori sisällön päälle ja valitseMuokkaa.
- Napsauta sisältöeditorissarikkaan tekstin moduulia ja korosta sitten teksti, jota haluat muokata.
- Napsauta rikkaan tekstin työkalurivilläFontti-pudotusvalikkoaja valitse fontti. Seuraavat fontit ovat käytettävissä rikkaan tekstin moduuleissa:
-
Andale Mono*
-
Arial
-
Kirja Antiqua*
-
Kuriiri Uusi
-
Georgia
-
Helvetica
-
Vaikutus*
- Lato**
- Merriweather**
-
-
- Monaco*
-
-
Symboli*
-
Tahoma
-
Terminaali*
-
Times New Roman
-
Trebuchet MS
-
Verdana
-
*Ei ole käytettävissä vedä ja pudota -sähköpostieditorissa.
**Voidaan käyttää vain web-fontteina sähköpostieditorissa.
Käytä Google Fontsia
Google-fontit ovat käytettävissä sisällönmuokkaimessa sivuilla, joilla käytetään aloitusmalleja ja -teemoja, sekä tietopohja-artikkeleissa ja mukautetuissa moduuleissa. Jos haluat käyttää Google-fonttia muilla sivuilla, sinun on kopioitava fontin tuontikoodi, liitettävä se sivun tyylitaulukkoon ja sovellettava fonttia CSS-säännöillä.
Lue lisää siitä, miten kehittäjät voivat käyttää fonttikenttiä lisätäkseen Google Fonts -kirjasimia teemoihin ja mukautettuihin moduuleihin HubSpotin kehittäjien dokumentaatiosta.
Huomaa: Google Fonts -fontteja ei voi valita tekstieditorin fonttipudotusvalikosta.
- Siirry osoitteeseen fonts.google.com.
- Kirjoita hakupalkkiinfontin nimi.
- Napsauta fontin nimeä nähdäksesi luettelon tuotavissa olevista tyyleistä.
- Napsauta jokaisen tuotavan tyylin vieressä + Valitse tämä tyyli.
- Valitse oikeanpuoleisessa paneelissa@importkohdassaUse on the web.
- Kopioi fontin koodi:
- Kopioi @import-koodi Käyttö verkossa -osioon ilman <style>-tunnistetta.
- KopioiCSS-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
- Käytä Google-fonttia mukautetussa koodatussa sähköpostimallissa
- Käytä Google-fonttia CTA:ssa
- Käytä Google-fonttia lomakkeessa
- Google-fontin käyttäminen mukautetussa moduulissa
Käytä Google-fonttia tyylitaulussa
- Kopioi fontin @import-koodi Google Fontsista.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Avaa etsimessä 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äkulmassaJulkaise taiPäivitäottaaksesi muutokset käyttöön.
Käytä Google-fonttia mukautetussa koodatussa sähköpostimallissa
- Kopioi fontin @import-koodi Google Fontsista.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Avaa hakulaitteessa mukautettu koodattu sähköpostimalli.
- Liitä @import-koodi mallin<head>-osioon
<style>....</style>-tagien
väliin. - Lisää sähköpostin rungon koodiin mukautettu fontti rivin muotoiluun.
- Napsauta oikeassa yläkulmassa PäivitätaiJulkaise ottaaksesi muutokset käyttöön.
Käytä Google-fonttia CTA:ssa
- Kopioi Googlen koodi CSS-sääntöjen asettamiseksi kyseiselle fontille.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Liidien kaappaus > Toimintaan kehoitukset.
- Vie hiiren kurssi CTA:n päälle, napsauta sitten Toiminnot-pudotusvalikkoa ja valitseMuokkaa.
- Valitse oikeassa paneelissaLisäasetukset.
- Liitä tekstikenttään Googlen koodi CSS-sääntöjen asettamiseksi kyseiselle fontille.
- Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.
Käytä Google-fonttia lomakkeessa
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Liidien kaappaus > Lomakkeet.
- 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 valikossatyyli-osiota.
- NapsautaTeksti-osiossaFonttiperhe-pudotusvalikkoa ja valitseGoogle-fontti.
- Napsauta oikeassa yläkulmassaPäivitätaiJulkaise 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.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Avaa mukautettu moduuli vasemmanpuoleisessa hakemistossa. Lisätietoja mukautetun moduulin luomisesta.
- Napsauta oikeanpuoleisessa tarkastajassaLisää kenttä-pudotusvalikkoaKentät-osiossaja valitseFontti. Lisätietoja fontti-kenttien kanssa työskentelystä.
- Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset otetaan käyttöön.
-
Siirry sisältöön:
- Verkkosivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Verkkosivuston sivut.
- Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Aloitussivut.
- Blogi: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Blogi.
- Vie hiiren kursori mukautettua moduulia käyttävän sisällön päälle ja valitseMuokkaa.
- Napsauta sisältöeditorissamukautettua moduulia.
- Napsauta sivupalkin editorissaFont-kentänpudotusvalikkoa ja valitseGoogle-fontti.
Käytä mukautettuja fontteja
Vaihtoehtona tavallisten web-fonttien taiGoogle Fontsin kaltaisenkirjastokirjaston käyttämiselle voit isännöidä fonttitiedostoja tiedostotyökalussa ja viitata niihin sitten tyylitaulussasi.
Huom:mukautetut fontit ovat käytettävissä vain tileillä, joilla on pääsy design manageriin, ja ne on sovellettava CSS:llä.Mukautetun fontin lisääminenei lisää fonttia sisältöeditorin pudotusvalikoihin.
Jos haluat käyttää fonttia sisällössä, lataa fontin tiedostot tiedostotyökaluun. HubSpot suosittelee lataamaan vähintään fontin.woff-, .ttf- ja . eot-versiot, jotta fontti latautuu kaikissa selaimissa. Voit käyttääFont Squirrelin muuntotyökalun Expert-tilaa muiden tiedostomuotojen luomiseen.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Tiedostot.
- NapsautaLataa tiedostoja.
- Valitse tietokoneen kiintolevyltäfonttitiedostot ja napsauta sittenAvaa.
- Napsauta ladatun fonttitiedoston nimeä.
- Napsauta oikeassa paneelissaKopioi 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.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Avaa hakulaitteessa sisällössäsi käytetty tyylitaulukko.
- Kunkin kirjasintyylin osalta:
- Liitä seuraava koodi tyylitaulukon yläosaan:
@font-face { font-family: 'Fontin nimi'; 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ä.
- Korvaayour_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ätaiJulkaise ottaaksesi muutokset käyttöön.
Käytä mukautettua fonttia mukautetussa koodatussa sähköpostimallissa
Useimmat suositut sähköpostiohjelmat eivät tue mukautettuja fontteja. Varmistaaksesi yhtenäisen kokemuksen lukijoillesi, oletusarvoisten web-fonttien käyttäminen sähköposteissa suositellaan. Jos kuitenkin haluat lisätä mukautetun fontin mukautettuun koodattuun sähköpostimalliin, voit tehdä sen, kun olet lisännyt mukautetun fontin tiedostotyökaluun.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- 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: 'Fontin nimi'; 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ä.
- Korvaayour_font_file.xxx?tiedostotyökalun URL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla.
- Lisää sähköpostin rungon koodiin mukautettu fontti rivin muotoiluun.
- Napsauta oikeassa yläkulmassa PäivitätaiJulkaise ottaaksesi muutokset käyttöön.
Käytä mukautettua fonttia CTA:ssa
Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit käyttää sitä CTA-kohteissa:
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Liidien kaappaus > Toimintaan kehoitukset.
- Vie hiiren kurssi CTA:n päälle, napsauta sitten Toiminnot-pudotusvalikkoa ja valitseMuokkaa.
- Valitse oikeassa paneelissaLisäasetukset.
- Liitä tämä koodi tekstiruutuun:
font-family: 'Fontin nimi';
- KorvaaFontin nimifontin nimellä.
- Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.
Mukautetun fontin käyttäminen mukautetussa moduulissa
Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit käyttää sitä mukautetuissa moduuleissa:
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Avaa mukautettu moduuli hakemistossa.
- Liitä module.css-osioon seuraava koodi:
@font-face { font-family: 'Fontin nimi'; 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ä.
- Korvaayour_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.
Thank you for your feedback, it means a lot to us.
Asiaan liittyvä sisältö
-
Google Analyticsin integrointi HubSpotin sisältöön
Kun integroit Google Analyticsin HubSpotiin, Google Analytics -tilisi kerää tietoja HubSpot-sivuston...
Tietämyskanta -
Luo sivu aloituspohjalla
Voit käyttää aloitusmallia yksinkertaisen verkkosivuston tai aloitussivun rakentamiseen. Tässä artikkelissa...
Tietämyskanta -
Määritä SSO (Single Sign-on) yksityisen sisällön käyttämistä varten.
Single sign-on (SSO) on tapa kirjautua eri sovelluksiin turvallisesti yhdellä käyttäjätunnuksella ja...
Tietämyskanta