Html – Create the own icon font .ttf .eot .woff and svg files

cssfontshtmlicon-fontsicons

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… 🙂

Best Answer

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

Related Topic