Blog

Kako napraviti web font

Prošlo je vreme kad smo bili oduševljeni sprite-om i mogucnošću da preko istog ubacujemo ikone, slike, state-ove buttona, itd. Ako hocete da vaš sajt bude lakši, da imate mnogo više mogućnosti da se igrate sa veličinama, bojama, senkama, uopšte sa svime onim što nam CSS pruža, dobro ste došli u svet WEB Fontova.


Pored velikog broja web library-a gde možete skinuti gotove setove fontova, ipak, bićete u situaciji da vam baš nešto fali. Imate ideju kako bi ikona trebalo da izgleda, znate da je nacrtate, ali kako da od nje napravite font?

U suštini, neočekivano jednostavno.

Pravljenje fonta od slike

1. Pošto ste sliku u Photoshop-u sveli na crno i belo ( sliku konvertovali u black & white, sveli linije pomoću Posterize i Treshhold efekata ), importujte je u Illustrator.

2. Primenite Image Trace a zatim Expand Trace na sliku.

image-trace-expand

3. Pošto uradite Ungroup, obrišite sve bele površine.

4. Ako želite, pošto je sad sve u krivama, doradite izgled.

5. Sačuvajte sliku kao SVG fajl ( u boxu SVG Options podesite sledeće vrednosti:  SVG Profile: SVG 1.1; Type: SVG; Subsettings: None; Image location: Embed ).

save-as-SVG

6. Idite na link  icomoon.io i u desnom gornjem uglu kliknite na IcoMoon App.

icomoon

7. Importujte svoj SVG fajl i kliknite na Generate Font.

comoon-import-generate

8. Kad downloaduje imaćete sve potrebne elemente da implementirate svoj novi font na web stranu.

Dobra strana font set-a koji napravite u  icomoon.io je i u tome što možete lako da dodajete nove i brišete postojeće fontove.

Mnogo sreće u pavljenju vašeg fonta!

 

Podelite ovaj članak