Font not getting applied in a web site viewed in IPad

Question

We are using the following CSS for applying font style for our website.. However the style is not getting applied when the website is viewed through an iPad device. Please help me solve this issue.

@font-face {font-family: boldFont;src: url( 'whitney-bold.ttf' );}

Answer 1

You need SVG format font files to work across the iOS devices. Try using the following link to generate all the required formats for cross browser compatibility using @font-face.

http://www.fontsquirrel.com/fontface/generator

Upload the font you require, and it will generate a package with the following font formats:

TrueType Fonts - Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts - Internet Explorer 4+
WOFF fonts - Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts - iPad and iPhone

Answer 2

This question has been asked before, it seems. Using CSS @font-face with the iPad/iPhone

Both this other question and various blog searches suggest that ios mobile safari requires you to convert certain font types to svg for them to render properly.