HubSpot Tietämyskanta

Käytä fontteja HubSpotissa

Kirjoittanut HubSpot Support | Nov 1, 2021 3:29:32 PM

HubSpotin sisältö käytettävissä olevat fontit riippuvat sisältö tyypistä ja kirjasintyypistä. Tietyt oletusfontit ovat käytettävissä kaikissa sisältö, kun taas web-fonteilla (kuten Google Fonts) ja mukautetuilla fonteilla on lisärajoituksia, jotka on esitetty alla:

Sisältö Fontin tyyppi
Oletusfontit Web-fontit

Mukautetut fontit
Sivu - teemamallit ✓ Käytettävissä teema-asetuksissa ja tyylitaulukon kautta ✓
Sivu - koodattu mallipohja ✓ 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 Jotkin oletusfontit eivät ole käytettävissä sähköposti, joka on vedä ja pudota Käytettävissä vain mukautetuille sähköposti; ei tuettu useimmissa sähköposti Käytettävissä vain mukautetuissa koodatuissa sähköposti; ei tuettu useimmissa sähköposti
Tietämyskanta Kirjasimia ei voi muokata artikkelieditorissa Käytettävissä teema-asetuksissa Käytettävissä teema-asetuksissa
Mukautettu moduuli ✓ Käytettävissä mukautetuille moduuleille, joita ei käytetä sähköposteissa Käytettävissä mukautetuissa moduuleissa, joita ei käytetä sähköposteissa
CTA (vanha) ✓ ✓ ✓
CTA ✓ ✓ ✓

Huomaa: kaikki sisältö eivät ole käytettävissä kaikilla tileillä. tili tilaukset käytettävissä olevat sisältö löytyvät Tuote ja palveluluettelosta.

Käytä oletusfontteja rikkaan tekstin moduuleissa

Oletusfontteja voidaan käyttää kaikentyyppisessä sisältö, ja ne on suunniteltu latautumaan useimmilla alustoilla ja laitteilla.

  1. Siirry sisältö:

    • Verkkosivusto:
    • Laskeutumissivut:
    • Blogi:
    • Sähköposti:
  2. Napsauta sisältö nimeä.
  3. Napsauta sisältö rikkaan tekstin moduulia ja korosta sitten teksti, jota haluat muokata.
  4. 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**
    • Monaco*

    • Symboli*

    • Tahoma

    • Terminaali*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Ei käytettävissä vedä ja pudota sähköposti.

**Osaatavana vain web-fonttina sähköposti.

Käytä web-fontteja

Web-fontit ovat oletusarvoisesti käytettävissä sisältö.

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ältö verkkotunnus.

Huomaa: verkkokirjasimia ei voi valita tekstieditorin fonttipudotusvalikosta.

Voit myös käyttää kolmannen osapuolen palveluja, kuten Google Fontsia, kopioimalla fontin tuonti, liittämällä sen sisältö tyylitaulukkoon ja soveltamalla fonttia CSS avulla:

  1. Siirry osoitteeseen fonts.google.com.
  2. Kirjoita hakupalkkiin fontin nimi.
  3. Napsauta fontin nimeä nähdäksesi luettelo tuonti olevista tyyleistä.
  4. Napsauta jokaisen tuonti tyylin vieressä + Valitse tämä tyyli
  5. Valitse oikeassa paneelissa Käytä verkossa -osiossa tuonti .
  6. Kopioi fontin koodi:
    • Kopioi Use on the web -osiossa tuonti ilman tunniste.
    • Kopioi CSS perheiden määrittämistä varten -kenttään -koodi CSS asettamista varten.

Kun olet saanut koodin Google Fontsista, voit lisätä fontin sisältö:

Käytä Google-fonttia tyylitaulussa

  1. Kopioi fontin tuonti Google Fontsista.
  2. Avaa hakulaitteessa sisältö käytetty tyylitaulukko.
  3. Liitä tuonti stylesheetin riville 1.
  4. Lisää CSS asettamista koskeva koodi tyylitaulukon asianmukaisiin valintoihin.
  5. Ota muutokset käyttöön napsauttamalla oikeassa yläkulmassa Julkaise muutokset.

Käytä Google-fonttia mukautetussa koodatussa mallipohja

Vaikka Apple Mail ja muutamat muut sähköposti tukevat Google-fontteja, laaja tuki on rajallinen, ja useimmat suositut sähköposti tukevat vain oletusarvoisia web-fontteja. Lisätietoja klassisessa sähköposti käytettävien oletusfonttien valitsemisesta.
 
Mukautetut koodatut sähköposti ovat käytettävissä vain tileillä, joilla on Marketing Hub Professional tai tilaus.
 
Google-fontin lisääminen mukautettuun koodattuun mallipohja:
  1. Kopioi fontin tuonti Google Fontsista.
  2. Avaa hakulaitteessa mukautettu koodattu mallipohja.
  3. Liitä tuonti mallipohja<head> -osioon <style>....</style> -tagien väliin.
  4. Lisää sähköposti rungon koodiin mukautettu fontti inline stylingiin.
  5. Ota muutokset käyttöön napsauttamalla oikeassa yläkulmassa Julkaise muutokset.

Käytä Google-fonttia CTA ssa (legacy)

  1. Kopioi Googlen koodi CSS asettamiseksi kyseiselle fontille.
  2. Vie hiiren kursori CTA n päälle ja napsauta sitten Toiminnot > Muokkaa.
  3. Valitse oikeassa paneelissa Lisäasetukset.
  4. Liitä tekstikenttään Googlen koodi CSS asettamiseksi kyseiselle fontille.
  5. Napsauta oikeassa alakulmassa Seuraava. Napsauta sitten Tallenna.

Käytä Google-fonttia lomake

  1. Vie hiiren kursori lomake nimen päälle ja valitse Toiminnot > Muokkaa lomake tai Luo uusi lomake.
  2. Napsauta lomake muokkausohjelmassa tyyli- ja esikatseluvälilehteä.
  3. Napsauta vasemmanpuoleisen sivupalkin valikossa Tyyli-osiota .
  4. Napsauta Teksti-osiossa Fonttiperhe-pudotusvalikkoa ja valitse Google-fontti.
  5. 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öposti käytettäviin mukautettuihin moduuleihin.


  1. Avaa vasemmanpuoleisessa hakulaitteessa mukautettu moduuli. Lisätietoja mukautetun moduulin luomisesta.
  2. Napsauta oikeanpuoleisessa tarkastajassaKentät-osiossa olevaaLisää kenttä -pudotusvalikkoa ja valitse Fontti. Lue lisää fontti-kenttien kanssa työskentelystä.

  3. Ota muutokset käyttöön napsauttamalla oikeassa yläkulmassa Julkaise muutokset .

  4. Siirry sisältö:

    • Verkkosivusto sivut:
    • Laskeutumissivut:
    • Blogi:
  5. Napsauta mukautettua moduulia käyttävän sisältö nimeä.
  6. Napsauta sisältö mukautettua moduulia.
  7. Napsauta sivupalkkieditorissa Font-kentän pudotusvalikkoa ja valitse Google-fontti.

Käytä mukautettuja fontteja

Vaihtoehtona tavallisten web-fonttien tai Google Fontsin kaltaisen kirjasto käyttämiselle voit ladata tiedostot 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ä. tiedostot 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 tietämyskanta.

  1. Siirry sisältö:

    • Verkkosivusto:
    • Laskeutumissivut:
    • Blogi:
  2. Napsauta sisältö nimeä.
  3. Napsauta sisältö Muokkaa-valikkoa ja valitse Teema: [Teeman nimi].
  4. Napsauta vasemmanpuoleisessa sivupalkin valikossa mitä tahansa fontin pudotusvalikkoa ja valitse Manage brändi fonts.
  5. Seuraa tämän Knowledge Base -artikkelin ohjeita lisätäksesi tai muokataksesi fontteja.

Lataa mukautettuja fontteja tietämyskanta

Kun olet ladannut mukautetut fontit, ne ovat käytettävissä sivuilla, viesteissä tai tietämyskanta.

  1. Napsauta oikeassa yläkulmassa Customize mallipohja.
  2. Napsauta vasemmassa sivupalkissa Design-välilehteä.
  3. Napsauta vasemmassa sivupalkissa Fonttityylit.
  4. Napsauta mitä tahansa fontin pudotusvalikkoa ja valitse Manage brändi fonts (Hallitse brändifontteja).
  5. Seuraa tämän Knowledge Base -artikkelin ohjeita lisätäksesi tai muokataksesi fontteja.

Muokkaa mukautettuja fontteja

Kun olet ladannut mukautetun fontin teemaeditoriin, voit ladata lisää fontteja, muokata olemassa olevia fontteja uusilla kirjasintyyleillä tai poistaa fontteja.

Mukautettujen fonttien käyttäminen tyylitaulukoissa

Vaihtoehtona tavallisten web-fonttien tai Google Fontsin kaltaisen kirjasto käyttämiselle voit isännöidä tiedostot tiedostot ja viitata niihin sitten tyylitaulussasi.

Huomaa: mukautetut fontit ovat käytettävissä vain tileillä, joilla on pääsy suunnittelun hallinta, ja ne on sovellettava CSS. Mukautetun fontin lisääminen ei lisää fonttia sisältö pudotusvalikoihin.

Jos haluat käyttää fonttia sisältö, lataa fontin tiedostot tiedostot. 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 tiedosto luomiseen.

  1. Napsauta Upload tiedostot.
  2. Valitse tietokoneen kiintolevyltä tiedostot ja napsauta sitten Avaa.
  3. Napsauta ladatun tiedosto nimeä.
  4. Kopioi URL-osoite, jossa tiedosto sijaitsee, napsauttamalla oikeassa paneelissa Kopioi URL-osoite. Tarvitset fontin URL-osoitteen kussakin tiedosto.

Mukautetun fontin käyttäminen tyylitaulukossa

Kun olet lisännyt mukautetun fontin tiedostot, voit viitata siihen tyylitaulukossa. Jokainen kirjasintyyli (kursivointi, lihavointi jne.) vaatii erillisen @font-face-säännön. Lue lisää tyylilomakkeiden kanssa työskentelystä HubSpotissa.

  1. Avaa hakulaitteessa sisältö käytetty tyylitaulukko.
  2. Kunkin kirjasintyylin kohdalla:
    • 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? tiedostot URL-osoitteella. Toista tämä jokaisen tiedosto kohdalla.
  1. Luo CSS ominaisuus mukautetun fontin käyttämiseksi.
  2. Napsauta oikeassa yläkulmassa Päivitä tai Julkaise ottaaksesi muutokset käyttöön.

Käytä mukautettua fonttia mukautetussa koodatussa mallipohja

Useimmat suositut sähköposti 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 mallipohja, voit tehdä sen, kun olet lisännyt mukautetun fontin tiedostot.

  1. Avaa hakulaitteessa mukautettu koodattu mallipohja.
  2. Kunkin kirjasintyylin kohdalla:
    • Liitä tämä koodi mallipohja<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? tiedostot URL-osoitteella. Toista tämä jokaisen tiedosto kohdalla.
  1. Lisää sähköposti rungon koodiin mukautettu fontti rivin muotoiluun.
  2. 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:t:

      1. Napsauta vasemmassa yläkulmassa olevaa pudotusvalikkoa ja valitse CTA:t
      2. Vie hiiren kursori CTA n päälle ja valitse sitten Toiminnot > Muokkaa.
      3. Napsauta CTA vasemmassa paneelissa Design-välilehteä.
      4. Laajenna tyylit-osio napsauttamalla sitä.
      5. Napsauta Primary Font (Ensisijainen fontti ) -pudotusvalikkoa ja valitse mukautettu fontti.
      6. Jatka CTA n luomista .

 

Käytä mukautettua fonttia CTA:ssa (vanha)

Samoin kuin CTA:t, kun olet ladannut mukautetun tiedosto, voit käyttää sitä vanhojen CTA:t kanssa:

      1. Vie hiiren kursori CTA:n päälle ja valitse sitten Toiminnot > Muokkaa.
      2. Valitse oikeassa paneelissa Lisäasetukset.
      3. Liitä tämä koodi tekstiruutuun:

        font-family: 'Your Font Name';
      4. Korvaa fontin nimi fontin nimellä.
      5. Napsauta oikeassa alakulmassa Seuraava. Napsauta sitten Tallenna.

Mukautetun fontin käyttäminen mukautetussa moduulissa

Kun olet lisännyt mukautetun fontin tiedostot, voit käyttää sitä mukautetuissa blogi tai sivumoduuleissa. Opi lisäämään mukautettu fontti mukautettuun koodattuun mallipohja.

  1. Avaa mukautettu moduulihakulaitteessa.
  2. 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');}
  1. Korvaa Fontin nimi fontin nimellä.
  2. Korvaa your_font_file.xxx? tiedostot URL-osoitteella. Toista tämä jokaisen tiedosto kohdalla.
  3. Luo CSS ominaisuus mukautetun fontin käyttämiseksi.
  4. Napsauta oikeassa yläkulmassa Publish changes (Julkaise muutokset ) ottaaksesi muutokset käyttöön.

Näytä koko julkaisu