Fixing mobile safari @font-face weight issues

By Melissa Penta on April 2, 2012
Share on Facebook0Tweet about this on TwitterShare on LinkedIn1Google+0

Our team ran across some odd issues with custom CSS fonts in the safari browser on the iPad and iPhone. Some of the curvy letters (such as G, C and S) would show up as a thinner font weight then the rest of the letters. We tried various CSS fixes only to come up empty handed. We were using the standard font-face CSS:
@font-face { font-family:FontName; src:url('Font.otf'); }
After much frustration, we finally found a solution that turned this:
Mobile Safari in .OTF Format
Into this:
Mobile Safari in .TTF Format
What did we do? Simple! Convert the .OTF font to a .TTF font. There are various free converters online that will do this for you, just look up font converter.

One thing I did notice is that TTF may not look as nice on the desktop browser so, like we did, you may want to target based on desktop or mobile CSS.