1

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... :)

Terry
  • 176
  • 9
Lester Vargas
  • 370
  • 2
  • 6
  • 23
  • 3
    No you don't: don't use all the obsolete and system formats. [Just use WOFF](http://caniuse.com/#feat=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 Mar 11 '16 at 17:13

1 Answers1

11

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

John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • This is brilliant. Takes 5 minutes to learn their interface and you import your existing icons, manipulate them, then export them. – Y.K. Feb 23 '21 at 05:57