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: 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.

copy-google-font

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.

add-google-fonts-imported-font-to-stylesheet

Napsauta oikeassa yläkulmassaJulkaise taiPäivitäottaaksesi muutokset käyttöön.

Käytä Google-fonttia mukautetussa koodatussa sähköpostimallissa

Vaikka Apple Mail ja muutamat muut sähköpostiohjelmat tukevat Google-fontteja, laaja tuki on rajallinen, ja useimmat suositut sähköpostiohjelmat tukevat vain oletusarvoisia web-fontteja. Lisätietoja päivitetyssä klassisessa sähköpostieditorissa käytettävien oletusfonttien valitsemisesta.

Google-fontin lisääminen mukautettuun koodattuun sähköpostimalliin:

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ä.

click-add-field

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.

sample-custom-font-in-stylesheet

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.

set-custom-font-for-cta

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.

custom-module-custom-font

Napsauta oikeassa yläkulmassa Julkaise muutokset, jotta muutokset otetaan käyttöön.

Was this article helpful? * Yes No

This form is used for documentation feedback only. Learn how to get help with HubSpot.