Create my own icon font .ttf .eot .woff and svg files

Question

I have created some icons in AI, so now I'm looking how to convert them in an icon font for web without using third-party applications (like fontastic...)

So I need to create my own .ttf, .eot, .woff and .svg files to insert them in this way:

@font-face {
  font-family: "MYFONT";
  src:url("fonts/MYFONT.eot");
  src:url("fonts/MYFONT.eot?#iefix") format("embedded-opentype"),
    url("fonts/MYFONT.woff") format("woff"),
    url("fonts/MYFONT.ttf") format("truetype"),
    url("fonts/MYFONT.svg#MYFONT") format("svg");
}

Any help will be very useful... :)

No you don't: don't use all the obsolete and system formats. Just use WOFF and you're done. Microsoft no longer supports any browsers that don't support WOFF, so EOT is now a dead format; SVG is literally dead, the spec was abandoned. TTF and OTF are universal fonts, so browsers may parse them way stricter than the same font wrapped in WOFF. Bottom line: in 2016, use WOFF, and only WOFF. Added bonus: your code is cleaner and easier to debug when things go wrong. — Mike 'Pomax' Kamermans

John Slegers John Slegers · Accepted Answer · 2016-03-11T16:47:07

I use the Icomoon App.

The Icomoon App allows you to do each of the following :

Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create

Icomoon

Create my own icon font .ttf .eot .woff and svg files

1 Answers