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: 25 helmikuuta 2026

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

HubSpotissa käytettävissä olevat fontit riippuvat sisällön tyypistä ja fontin tyypistä. Tietyt oletusfontit ovat käytettävissä kaikissa sisällön muokkausohjelmissa, kun taas verkkofontteihin (kuten Google Fonts) ja mukautettuihin fontteihin sovelletaan lisärajoituksia, jotka on kuvattu alla: 

Sisältötyyppi Fonttityyppi  
  Oletusfontit Verkkofontit

Mukautetut fontit

  
Sivu - teemamallit ✓ Saatavilla teeman asetuksissa ja tyylitiedoston kautta ✓  
Sivu - koodattu malli ✓ Saatavana tyylitiedoston tai mukautetun moduulin kautta Saatavana tyylitiedoston kautta  
Blog ✓ Saatavana tyylitiedoston tai mukautetun moduulin kautta ✓  
Sähköposti Joitakin oletusfontteja ei ole käytettävissä vedä ja pudota -sähköpostieditorissa Käytettävissä vain mukautetusti koodatuissa sähköpostimalleissa; ei tueta useimmissa sähköpostiohjelmissa Käytettävissä vain mukautetusti koodatuissa sähköpostimalleissa; ei tueta useimmissa sähköpostiohjelmissa  
Tietokanta Fontteja ei voi mukauttaa artikkelieditorissa Käytettävissä teeman asetuksissa  Käytettävissä teeman asetuksissa  
Mukautettu moduuli ✓ Saatavana mukautetuille moduuleille, joita ei käytetä sähköposteissa Saatavana mukautetuille moduuleille, joita ei käytetä sähköposteissa  
CTA (vanha) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

Huomaa: kaikki sisältötyypit eivät ole käytettävissä kaikissa tileissä. HubSpot-tilisi tilauksissa käytettävissä olevat sisältötyypit löytyvät Tuote- ja palveluluettelosta. 

Käytä oletusfontteja rich text -moduuleissa

Oletusfontteja voidaan käyttää kaikentyyppisessä sisällössä, ja ne on suunniteltu latautumaan useimmille alustoille ja laitteille. 

  1. Siirry sisältöösi:

  2. Napsauta sisällön nimeä. 
  3. Napsauta sisältöeditorissarich text -moduulia ja korosta sitten teksti, jota haluat muokata. 
  4. Napsauta rich text -työkalurivilläFont-pudotusvalikkoaja valitse fontti. Rich text -moduuleissa on käytettävissä seuraavat fontit: 
    • Brändifontit

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*

    • Symbol

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

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

**Käytettävissä vain verkkofonttina vedä ja pudota -sähköpostieditorissa.

Käytä verkkofontteja

Verkkofontit ovat käytettävissä oletusarvoisesti sisällön editorissa.

Jos olet kehittäjä, voit myös käyttää fonttikenttää lisätäksesi verkkofontteja teemoihin ja mukautettuihin moduuleihin. Näillä tavoilla käytettynä verkkofontteja ei ladata kolmannen osapuolen palvelusta, vaan HubSpot lataa ne suoraan sisällön verkkotunnukselle.

Huomaa: verkkofontteja ei voi valita rich text -editorin fontin pudotusvalikosta. 

Voit myös käyttää kolmannen osapuolen palveluita, kuten Google Fonts, kopioimalla fontin tuontikoodin, liittämällä sen sisällön tyylitiedostoon ja soveltamalla fonttia CSS:n kautta:

  1. Siirry osoitteeseen fonts.google.com.
  2. Kirjoita hakupalkkiinfontin nimi. 
  3. Napsauta fontin nimeä nähdäksesi luettelon tuontiin käytettävissä olevista tyyleistä.
  4. Napsauta kunkin tuontiin valitsemasi tyylin vieressä + Valitse tämä tyyli
  5. Valitse oikeanpuoleisesta paneelista@importkohdasta Käytä verkossa. 
  6. Kopioi fontin koodi: 
    • Kopioi Käytä verkossa -osiossa @import-koodi ilman <style>-tagiä.
    • KopioiCSS-sääntöjen määrittämiskenttään koodiCSS-sääntöjen asettamista varten. 

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

Käytä Google Fontia tyylitiedostossa

  1. Kopioi fontin @import-koodi Google Fontsista.
  2. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  3. Avaa hakukoneessa sisältösi tyylitiedosto.
  4. Liitä @import-koodi tyylitiedoston riville 1. 
  5. Lisää koodi CSS-sääntöjen asettamiseksi tyylitiedoston sopiviin valitsimiin.
  6. Napsauta oikeassa yläkulmassaJulkaise muutokset, jotta muutokset tulevat voimaan. 

Käytä Google Fontia mukautetussa koodatussa sähköpostimallissa

Vaikka Google Fonts on tuettu Apple Mailissa ja muutamissa muissa sähköpostiohjelmissa, laaja tuki on rajoitettua ja useimmat suosittuja sähköpostiohjelmat tukevat vain oletusverkkofontteja. Lisätietoja klassisessa sähköpostieditorissa käytettävien oletusfonttien valitsemisesta. 
 
Mukautetut sähköpostimallit ovat käytettävissä vain tileillä, joilla on Marketing Hub Professional - tai Enterprise -tilauksella. 
 
Google-fontin lisääminen mukautetusti koodattuun sähköpostimalliin: 
  1. Kopioi fontin @import-koodi Google Fontsista.
  2. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  3. Avaa hakukoneessa mukautettu koodattu sähköpostimalli.
  4. Liitä @import-koodi mallin<head> -osioon <style>....</style> -tunnisteiden väliin. 
  5. Lisää sähköpostin tekstiosan koodiin mukautettu fontti inline-tyylinä. 
  6. Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset tulevat voimaan. 

Google-fontin käyttö CTA:ssa (vanha versio)

  1. Kopioi Googlen koodi kyseisen fontin CSS-sääntöjen asettamista varten.
  2. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
  3. Vie hiiri CTA:n päälle ja napsauta Toiminnot > Muokkaa. 
  4. Napsauta oikeassa paneelissaLisäasetukset. 
  5. Liitä tekstikenttään Googlen koodi kyseisen fontin CSS-sääntöjen asettamista varten. 
  6. Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna.

Google-fontin käyttö lomakkeessa

  1. Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
  2. Vie hiiri lomakkeen nimen päälle ja napsauta Toiminnot > Muokkaa lomaketta tai Luo uusi lomake.
  3. Napsauta lomakeeditorissa Tyyli ja esikatselu -välilehteä. 
  4. Napsauta vasemmassa sivupalkissaTyyli-osiota.
  5. NapsautaTeksti-osiossaFonttiperhe-pudotusvalikkoa ja valitseGoogle-fontti. 
  6. Napsauta oikeassa yläkulmassaPäivitä taiJulkaise, jotta muutokset tulevat voimaan. 

Google-fontin käyttö mukautetussa moduulissa

Huomaa: Google-fontit eivät ole käytettävissä sähköpostimallien mukautetuissa moduuleissa.


  1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa vasemmalla olevassa hakukoneessa mukautettu moduuli. Lisätietoja mukautetun moduulin luomisesta.
  3. Napsauta oikeanpuoleisessa tarkastelussaLisää-kentänavattavaa valikkoaKentät-osiossa ja valitseFontti. Lisätietoja fonttikenttien käytöstä.

  4. Napsauta oikeassa yläkulmassa Julkaise muutokset, jottamuutokset tulevat voimaan. 

  5. Siirry sisältöösi:

  6. Napsauta mukautetun moduulin sisältö ä. 
  7. Napsauta sisältöeditorissamukautettua moduulia. 
  8. Napsauta sivupalkin editorissaFontti-kentän avattavaavalikkoa ja valitseGoogle-fontti. 

Käytä mukautettuja fontteja

Voit ladata fonttitiedostoja ja käyttää niitä teemoissa tai viitata niihin tyylitiedostoissa vaihtoehtona tavallisille verkkofonteille taiGoogle Fontsin kaltaisille fonttikirjastoille. 

Käytä mukautettuja fontteja teemoissa

Teemankäsittelijässä voit ladata mukautetun fontin ja käyttää sitä sivuilla ja viesteissä. Fonttitiedostot ovat tuettuja seuraavissa muodoissa: TTF, OTF, WOFF.

Lataa mukautetut fontit sivuille tai viesteihin

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

  1. Siirry sisältöön:

  2. Napsauta sisällön nimeä. 
  3. Napsauta sisältöeditorissaMuokkaa-valikkoaja valitseTeema: [Teeman nimi].
  4. Napsauta vasemman sivupalkin valikossa mitä tahansa fontinavattavaa valikkoa ja valitseHallitse brändin fontteja.
  5. Lisää tai muokkaa fontteja noudattamalla tämän tietokannan artikkelin ohjeita.

Lataa mukautetut fontit tietopankkiartikkeleihin

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

  1. Siirry HubSpot-tililläsi kohtaan Palvelu > Tietämyskanta.
  2. Napsauta oikeassa yläkulmassaMukauta malli.
  3. Napsauta vasemmassa sivupalkissa Suunnittelu- välilehteä.
  4. Napsauta vasemmassa sivupalkissa Fonttityylit.
  5. Napsauta mitä tahansa fontinavattavaa valikkoa ja valitseHallitse brändin fontteja.
  6. Lisää tai muokkaa fontteja tämän tietokannan artikkelin ohjeiden mukaisesti.

Muokkaa mukautettuja fontteja

Kun olet ladannut mukautetun fontin teemaeditoriin, voit ladata lisää fontteja, mukauttaa olemassa olevia fontteja lisäfonttityyleillä tai poistaa fontteja. 

Käytä mukautettuja fontteja tyylitiedostoissa

Vaihtoehtona tavallisten verkkofonttien taiGoogle Fontsin kaltaisten fonttikirjastojen käytölle voit isännöidä fonttitiedostoja tiedostotyökalussa ja viitata niihin tyylitiedostossasi. 

Huomaa: mukautetutfontit ovat käytettävissä vain tileillä, joilla on pääsy suunnittelunhallintaan, ja ne on sovellettava CSS:llä. Mukautetun fontin lisääminenei lisää fonttia tyylivalikoihin sisällön editorissa. 

Jos haluat käyttää fonttia sisällössä, lataa fonttitiedostot tiedostotyökaluun. On suositeltavaa ladata vähintään fontin .woff-, .ttf- ja .eot-versiot, jotta fontti latautuu varmasti kaikissa selaimissa. Voit käyttääFont Squirrelin muunnostyökalun asiantuntijatilaa luodaksesi lisää tiedostomuotoja.

  1. Siirry HubSpot-tililläsi kohtaan Sisältö > Tiedostot. Jos käytät HubSpotin ilmaisia työkaluja, siirry kohtaan Markkinointi > Sähköposti. Napsauta oikeassa ylälaidassa Sähköpostityökalut ja valitse Tiedostot.
  2. NapsautaLataa tiedostot. 
  3. Valitse tietokoneesi kiintolevyltäfonttitiedostot ja napsauta sittenAvaa. 
  4. Napsauta ladatun fonttitiedoston nimeä. 
  5. Napsauta oikeanpuoleisessa paneelissaKopioi URL-osoite kopioidaksesi tiedoston sijaintia osoittavan URL-osoitteen. Tarvitset URL-osoitteen jokaiselle tiedostomuodolle. 

Käytä mukautettua fonttia tyylitiedostossa

Kun olet lisännyt mukautetun fontin tiedostotyökaluun, voit viitata siihen tyylitiedostossa. Jokainen fonttityyli (kursivoitu, lihavoitu jne.) vaatii erillisen @font-face-säännön. Lue lisää tyylitiedostojen käytöstä HubSpotissa. 

  1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa Finderissa sisältösi tyylitiedosto.
  3. Jokaiselle fonttityylille: 
    • Liitä tyylitiedoston yläosaan 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ä .
      • Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaiselle tiedostomuodolle.
  1. Luo CSS-säännöt font-family -ominaisuudella, jotta mukautettu fontti otetaan käyttöön. 
  2. Napsauta oikeassa yläkulmassa Päivitä taiJulkaise, jotta muutokset tulevat voimaan. 

Käytä mukautettua fonttia mukautetussa koodatussa sähköpostimallissa

Mukautettuja fontteja ei tueta useimmissa suosituissa sähköpostiohjelmissa. Jotta lukijat saavat yhdenmukaisen kokemuksen, on suositeltavaa käyttää sähköposteissa oletusarvoisia verkkofontteja. Jos kuitenkin haluat lisätä mukautetun fontin mukautetusti koodattuun sähköpostimalliin, voit tehdä sen, kun olet lisännyt mukautetun fontin tiedostotyökaluun.

  1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaa hakukoneessa mukautettu koodattu sähköpostimalli.
  3. Jokaiselle fonttityylille:
    • Liitä tämä koodi mallin <head>-osioon <style>....</style>-tunnisteiden 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ä .
    • Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaiselle tiedostomuodolle. 
  1. Lisää sähköpostin tekstiosan koodiin mukautettu fontti inline-tyylinä. 
  2. Napsauta oikeassa yläkulmassa Päivitä taiJulkaise, jotta muutokset tulevat voimaan. 

Käytä mukautettua fonttia CTA:ssa

Kun olet lisännyt mukautetun fontin teemaan, voit käyttää sitä CTA:ssa:

      1. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
      2. Napsauta vasemmassa yläkulmassa olevaa avattavaa valikkoa ja valitse CTA:t
      3. Vie hiiri CTA:n päälle ja napsauta sitten Toiminnot > Muokkaa. 
      4. Napsauta CTA-editorin vasemmassa paneelissa Design-välilehteä. 
      5. Napsauta Styles-osiota laajentaaksesi sen.
      6. Napsauta Ensisijainen fontti -pudotusvalikkoa ja valitse mukautettu fontti. 
      7. Jatka CTA:n luomista. 

 

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

Samoin kuin CTA:issa, voit käyttää mukautettua lomaketiedostoa vanhoissa CTA:issa sen lataamisen jälkeen:

      1. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
      2. Vie hiiri CTA:n päälle ja napsauta Toiminnot > Muokkaa. 
      3. Napsauta oikeanpuoleisessa paneelissaLisäasetukset. 
      4. Liitä tekstikenttään seuraava koodi:

        font-family: 'Fontin nimi';
      5. Korvaa fontin nimifontin nimellä.
      6. Napsauta oikeassa alakulmassaSeuraava. Napsauta sitten Tallenna. 

Käytä mukautettua fonttia 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. 

  1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
  2. Avaahakukoneessa mukautettu moduuli.
  3. Liitä seuraava koodi module.css -osioon: 
@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. Korvaayour_font_file.xxx?tiedostotyökalunURL-osoitteella. Toista tämä jokaiselle tiedostomuodolle.
  3. Luo CSS-säännöt font-family -ominaisuudella mukautetun fontin soveltamiseksi. 
  4. Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset tulevat voimaan. 
Oliko tästä artikkelista apua?
Tätä lomaketta käytetään vain dokumentaation palautteeseen. Lue, miten saat apua HubSpotin kanssa.

Asiaan liittyvä sisältö

Asiaan liittyvä sisältö

New call-to-action