Miten käyttää Google Fontteja ja omia fontteja lomakkeilla

14. helmikuuta 2022

Sisäänrakennettujen fonttien lisäksi Jotform tukee At-komentoja (@importand, @font-face). Voit käyttää näitä koodeja Google fonttien käyttämiseen lomakkeellasi. Voit myös käyttää fontteja jotka on tallennettu omalle serverillesi.

Tuo fontti Google Fonteista

1. Kopioi fontin koodi täältä: https://fonts.google.com/

a. Etsi ja valitse fontti.

Miten käyttää Google Fontteja ja omia fontteja lomakkeilla Image-1

b. Valitse tyyli jota haluat käyttää.

c. Valtse @import “Use on the web” kohdasta.

d. Kopioi @import -koodi.

Miten käyttää Google Fontteja ja omia fontteja lomakkeilla Image-2

2. Palaa takaisin Lomakkeenrakentajaan, ja avaa Tyylit-välilehti Form Designerissa. Liitä kopioitu koodi kaiken muun CSS-koodin yläpuolelle.

Miten käyttää Google Fontteja ja omia fontteja lomakkeilla Image-3

3.Käyttääksesi fontteja, käytä font-family attribuuttia.

4. käyttää seuraavaa koodia:

.form-all * {
    font-family:’Raleway’,sans-serif;
}

Vaihda Raleway haluamaksesi Google fontiksi. Löydät fonttisi nimen Google Fonttien sivulta, josta kopioit koodin.

Miten käyttää Google Fontteja ja omia fontteja lomakkeilla Image-4

Mukautetut fontit tallennettuna omalle serverille

Voit käyttää alla olevaa koodia ja liittää sen Lomakkeenrakentajaan. Muuta font-family arvot käyttämäsi fontin mukaisiksi. Voit myös luoda oman @font-face koodin parantaaksesi fontin käytettävyyttä eri selaimissa käyttäen tätä työkalua:  https://transfonter.org/.

Esimerkki:
@font-face {
     font-family:myFirstFont;
     src:url(https://www.yoursite.comfontscoolfont_bold.woff);
     font-weight:bold;
}
.form-all * {
     font-family:’myFirstFont’,sans-serif;
}

Miten käyttää Google Fontteja ja omia fontteja lomakkeilla Image-5

Jos sinulla on kysymyksiä, lähetä meille kommentti alla.

Ota yhteyttä:

Asiakastukitiimimme on tavoitettavissa ympäri vuorokauden ja keskimääräinen vastausaika on yhdestä kahteen tuntia.
Tiimiimme voi ottaa yhteyttä:

Tukifoorumi: https://www.jotform.com/answers/

Ota yhteyttä Jotformin tukitiimiin: https://www.jotform.com/contact/

Lähetä viesti:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Podo Comment Ole ensimmäinen kommentoija.