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

Update:  Another solution is  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.

Tagged with: ,

Leave a Reply

Your email address will not be published. Required fields are marked *