iOS AND ANDROID
Topics:
Choose a tag
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:
Into this:
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.
