Käytä fontteja HubSpotissa
Päivitetty viimeksi: toukokuuta 22, 2023
Saatavilla minkä tahansa seuraavan Tilauksen kanssa, paitsi jos toisin mainitaan:
|
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 - 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ä 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 | ✓ | ✓ | ✓ |
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 valitse Muokkaa.
- 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
-
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.
**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 lisätä web-fontteja teemoihin ja mukautettuihin moduuleihin fontti-kentän avulla. Näillä tavoilla käytettäessä web-fontteja ei ladata kolmannen osapuolen palvelusta, vaan HubSpot palvelee niitä suoraan verkkotunnuksella, johon sivu latautuu.
Huomaa: verkkokirjasimia ei voi valita tekstieditorin fonttipudotusvalikosta.
Voit myös käyttää kolmannen osapuolen palveluja, kuten Google Fontsia, kopioimalla fontin tuontikoodin, liittämällä sen sivun 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
- 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 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 tai Pä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ä tai Julkaise 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 valitse Muokkaa.
- Valitse oikeassa paneelissa Lisäasetukset.
- Liitä tekstikenttään Googlen koodi CSS-sääntöjen asettamiseksi kyseiselle fontille.
- Napsauta oikeassa alakulmassa Seuraava. 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 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.
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Avaa mukautettu moduuli vasemmanpuoleisessa hakemistossa. Lisätietoja mukautetun moduulin luomisesta.
- Napsauta oikeanpuoleisessa tarkastajassa Lisää kenttä -pudotusvalikkoa Kentät-osiossa ja valitse Fontti. 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 valitse Muokkaa.
- 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 taiGoogle Fontsin kaltaisen kirjastokirjaston käyttämiselle voit isännöidä fonttitiedostoja tiedostotyökalussa ja viitata niihin sitten tyylitaulussasi.
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. 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.
- 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.
- 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ökalunURL-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.
- 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ökalunURL-osoitteella. Toista tämä jokaisen tiedostomuodon kohdalla.
- Lisää sähköpostin rungon koodiin mukautettu fontti rivin muotoiluun.
- Napsauta oikeassa yläkulmassa Päivitä tai Julkaise 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 valitse Muokkaa.
- Valitse oikeassa paneelissa Lisäasetukset.
- Liitä tämä koodi tekstiruutuun:
font-family: 'Fontin nimi';
- 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.
- 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ökalunURL-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.
Asiaan liittyvä sisältö
-
Vie sisältösi ja tietosi
Opi viemään HubSpot-sisältöä ja -tietoja, kuten sivuja, yhteystietoja ja tiedostoja, tililtäsi. Huomaa:...
Tietämyskanta -
Luo click-to-call- tai mailto-linkki
Kun napsautetaan click-to-call-painikkeita, ne yhdistävät mobiililaitteiden kävijät tiettyyn puhelinnumeroon.
Tietämyskanta -
Personoi sisältösi
Henkilökohtaistamistunnisteiden avulla voit näyttää kontakteillesi henkilökohtaista sisältöä CRM:ssä olevien...
Tietämyskanta