Font2Web

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.

Posted in Coding, Tools Tagged with: ,

Leave a Reply