Problem
Using your own fonts with HTML 5 can be great, but different browsers require different font formats. I only had the TTF (True Type Font) file, but I also needed the otf, .eot, .woff and .svg files to be compatible with all browsers.
Solution
http://www.font2web.com. Font 2 Web is a great website that does what it says. It takes your TTF and gives you back a zip file with the other 4 files that you need. It also gives you the CSS file needed for your custom @font-face. You may notice that in the CSS file the local src has a smiley face character. You can read more here on what that’s all about: http://paulirish.com/2010/font-face-gotchas/#smiley.
Update: Another solution is http://www.fontsquirrel.com. However, even if you have all font format files, it still may not work in all browsers and all OS’s. I believe one issue is the EOT licensing issue for IE. Microsoft use EOT format so that font licenses can be verified so maybe I’m using un-licensed fonts. The only fonts that have worked consistently for me are Google’s Web Fonts.