Tuesday, April 22, 2014

Tip: How to embed different font files for different browser?

Scenario:
Many times you want to embed the necessary font files for the exact browsers that you want to target in order to save internet bandwidth and to improve web site performance. For example, Google Chrome uses the *.svg file to render the best quality of text but other browsers might not support that font file, so you might as well instruct the browser downloads only that font file rather than downloading everyting.

Solution:
Create several css files (i.e.browser specific) that contain the font files declaration. Determine the font file to use at the server or web site host. Here's an example using the ASP.NET MVC:


Friday, April 11, 2014

Tip: Embed open type font (otf) with CSS.

Recently got some font files from the web designer and those files are in otf format. When i tried to embed the font files into CSS i receive the following error from IE10:

         CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.

As far i have gathered some information from Google, I need to convert the format to true type (ttf) font. I used the web site http://everythingfonts.com/otf-to-ttf to convert the font files and use the "embed" program from http://carnage-melon.tom7.org/embed/ to change the embed level of the font files so that IE can use them. I used VS2012 to do the code compilation because the original embed.exe does not work on my 64 bit machine.

 Attached here the working program. https://drive.google.com/file/d/0B0QLqsRA_p4pYWhtV2c2Z1FnaWs/edit?usp=sharing