View Full Version : @font-face not working in Safari mobile/good safari mobile emulator?

10-25-2010, 01:32 PM
Hello all,

To my dismay i discovered my @font-face font is not working on the Safari mobile browser. I downloaded the font package from Fontsquirrel and yes it does have the font in its svg version. Here is the CSS code:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 20, 2010 05:06:32 PM America/New_York */
@font-face {
font-family: 'ChopinScriptRegular';
src: url('../fonts/ChopinScript-webfont.eot');
src: local('☺'), url('../fonts/ChopinScript-webfont.woff') format('woff'), url('../fonts/ChopinScript-webfont.ttf') format('truetype'), url('ChopinScript-webfont.svg#webfont3FgKTvnt') format('svg');
font-weight: normal;
font-style: normal;

div#navbar ul {
/*border: solid red 1px;*/
width: 720px;
margin: 0px auto;
padding: 0px;
font-family: ChopinScriptRegular, Arial, Helvetica;
font-size: 170%;
color: #2a0050;
line-height: 37px;
white-space: nowrap;

Have I missed something? Does Safari mobile have a issue with the font-height being in"%?"

Also, does anyone know of a good safari mobile browser emulator that actually reads the fonts in the apparently needed svg version so I can test any corrections? I do not have the Ipad or Iphone and the closest Apple store is a 20 minute drive. Any help would be appreciated.


10-25-2010, 02:56 PM
AFAIK, you should be good using @font-face for the safari mobile browser as long as the fonts are SVG.

10-25-2010, 03:10 PM
But that is the issue. It is not working on safari mobile. I was wondering if I missed something in my CSS code, or my css styling of the font...