While testing the Violet Pear website, we came across a font issue on Windows Phone 7 devices. Internet Explorer on Windows Phone 7 doesn’t support @font-face CSS property. The Windows Phone 7 devices support and use only the built-in fonts in the OS. As a result the website isn’t displayed in the font we’ve used in the CSS on the Windows Phone OS. This shortcoming of the Windows Phone OS caused the headlines on our pages to appear way too big on the devices which are powered by it and that broke the formatting and layout of our website.

So we headed over to Google and searched for IE fixes for Windows Phone 7. We got to know from MSDN that there is a fix for that. It’s a very simple fix. All you have to do is add the property “-ms-text-size-adjust” to the tag you want to fix. Here’s an example on how to use the tag:

-ms-text-size-adjust: 80%;

Here 80% declares the size of the font i.e. 80% of the original font size for the tag. Do keep in mind that using this fix will make your CSS invalid at W3C CSS validator.

You can read the MSDN article here.