2

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' );}
1

2 Answers 2

3

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

2
  • We tried out the solution.. Still its not working... How ever its showing a default font not the original "whitney" font
    – Anish
    Feb 21, 2012 at 6:26
  • Well.. we figured it out on our end itself.. the corresponding font ".otf" file fixed the problem.. thought of sharing it others.. (BTW svg didn't worked for us)
    – Anish
    Feb 22, 2012 at 14:33
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.