Siirry sisältöön
HubSpot Tietämyskanta
Huomaa: Tämän artikkelin käännös on tarkoitettu vain tiedoksi. Käännös on luotu automaattisesti käännösohjelmiston avulla, eikä sitä ole välttämättä tarkistettu. Näin ollen tämän artikkelin englanninkielistä versiota on pidettävä hallitsevana versiona, joka sisältää uusimmat tiedot. Voit tutustua siihen täällä.

Käytä fontteja HubSpotissa

Päivitetty viimeksi: 26 toukokuuta 2025

Saatavilla minkä tahansa seuraavan Tilauksen kanssa, paitsi jos toisin mainitaan:

Kaikki tuotteet ja HubSpot-tilaukset

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: Siirry HubSpot-tililläsi kohtaan Sisältö > Verkkosivuston sivu.
    • 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ä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.

copy-google-font

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

Käytä Google-fonttia tyylitaulussa

  1. Kopioi fontin tuonti Google Fontsista.
  2. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  3. Avaa hakulaitteessa sisältö käytetty tyylitaulukko.
  4. Liitä tuonti stylesheetin riville 1.
  5. Lisää CSS asettamista koskeva koodi tyylitaulukon asianmukaisiin valintoihin.
  6. Ota muutokset käyttöön napsauttamalla oikeassa yläkulmassa Julkaise muutokset.
add-google-fonts-imported-font-to-stylesheet

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. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  3. Avaa hakulaitteessa mukautettu koodattu mallipohja.
  4. Liitä tuonti mallipohja<head> -osioon <style>....</style> -tagien väliin.
  5. Lisää sähköposti rungon koodiin mukautettu fontti inline stylingiin.
  6. 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. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
  3. Vie hiiren kursori CTA n päälle ja napsauta sitten Toiminnot > Muokkaa.
  4. Valitse oikeassa paneelissa Lisäasetukset.
  5. Liitä tekstikenttään Googlen koodi CSS asettamiseksi kyseiselle fontille.
  6. Napsauta oikeassa alakulmassa Seuraava. Napsauta sitten Tallenna.

Käytä Google-fonttia lomake

  1. Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
  2. Vie hiiren kursori lomake nimen päälle ja valitse Toiminnot > Muokkaa lomake tai Luo uusi lomake.
  3. Napsauta lomake muokkausohjelmassa tyyli- ja esikatseluvälilehteä.
  4. Napsauta vasemmanpuoleisen sivupalkin valikossa Tyyli-osiota .
  5. Napsauta Teksti-osiossa Fonttiperhe-pudotusvalikkoa ja valitse Google-fontti.
  6. 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. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa vasemmanpuoleisessa hakulaitteessa mukautettu moduuli. Lisätietoja mukautetun moduulin luomisesta.
  3. Napsauta oikeanpuoleisessa tarkastajassaKentät-osiossa olevaaLisää kenttä -pudotusvalikkoa ja valitse Fontti. Lue lisää fontti-kenttien kanssa työskentelystä.

    click-add-field
  4. Ota muutokset käyttöön napsauttamalla oikeassa yläkulmassa Julkaise muutokset .

  5. Siirry sisältö:

    • Verkkosivusto sivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Verkkosivuston sivu.
    • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
    • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
  6. Napsauta mukautettua moduulia käyttävän sisältö nimeä.
  7. Napsauta sisältö mukautettua moduulia.
  8. 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: Siirry HubSpot-tililläsi kohtaan Sisältö > Verkkosivuston sivu.
    • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
    • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > 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. Siirry HubSpot-tililläsi kohtaan Palvelu > Tietämyskanta.
  2. Napsauta oikeassa yläkulmassa Customize mallipohja.
  3. Napsauta vasemmassa sivupalkissa Design-välilehteä.
  4. Napsauta vasemmassa sivupalkissa Fonttityylit.
  5. Napsauta mitä tahansa fontin pudotusvalikkoa ja valitse Manage brändi fonts (Hallitse brändifontteja).
  6. 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. Siirry HubSpot-tililläsi kohtaan Sisältö > Tiedostot.
  2. Napsauta Upload tiedostot.
  3. Valitse tietokoneen kiintolevyltä tiedostot ja napsauta sitten Avaa.
  4. Napsauta ladatun tiedosto nimeä.
  5. 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. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa hakulaitteessa sisältö käytetty tyylitaulukko.
  3. 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.

sample-custom-font-in-stylesheet

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. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa hakulaitteessa mukautettu koodattu mallipohja.
  3. 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. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
      2. Napsauta vasemmassa yläkulmassa olevaa pudotusvalikkoa ja valitse CTA:t
      3. Vie hiiren kursori CTA n päälle ja valitse sitten Toiminnot > Muokkaa.
      4. Napsauta CTA vasemmassa paneelissa Design-välilehteä.
      5. Laajenna tyylit-osio napsauttamalla sitä.
      6. Napsauta Primary Font (Ensisijainen fontti ) -pudotusvalikkoa ja valitse mukautettu fontti.
      7. 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. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
      2. Vie hiiren kursori CTA:n päälle ja valitse sitten Toiminnot > Muokkaa.
      3. Valitse oikeassa paneelissa Lisäasetukset.
      4. Liitä tämä koodi tekstiruutuun:

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

set-custom-font-for-cta

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. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa mukautettu moduulihakulaitteessa.
  3. 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.

custom-module-custom-font
Oliko tästä artikkelista apua?
Tätä lomaketta käytetään vain dokumentaation palautteeseen. Lue, miten saat apua HubSpotin kanssa.
Sisällysluettelo Valikko

Asiaan liittyvä sisältö

OSZAR »