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](https://www.jotform.com/blog/wp-content/uploads/2022/02/etsifontti-700x410.png)
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](https://www.jotform.com/blog/wp-content/uploads/2022/02/fontit-700x327.png)
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](https://www.jotform.com/blog/wp-content/uploads/2022/02/tyylit1-700x497.png)
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](https://www.jotform.com/blog/wp-content/uploads/2022/02/cssfontti-700x473.png)
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](https://www.jotform.com/blog/wp-content/uploads/2022/02/cssfontt.png)
Jos sinulla on kysymyksiä, lähetä meille kommentti alla.
Lähetä viesti: