Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@font-face not embedding on mobile Safari (iPhone/iPad)

I'm embedding fonts on a mobile website using @font-face (css from FontSquirrel). When I preview in desktop Safari or Chrome, the fonts embed fine, but they don't appear in mobile Safari on the iPhone/iPad. I'm not getting any errors and I can't figure out what's going wrong. Here's my CSS. Any ideas?

@font-face {
    font-family: 'JottingRegular';
    src: url('../fonts/jotting_regular-webfont.eot');
    src: local('☺'),
         url('../fonts/jotting_regular-webfont.woff') format('woff'),
         url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
         url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JottingBold';
    src: url('../fonts/jotting_bold-webfont.eot');
    src: local('☺'),
         url('../fonts/jotting_bold-webfont.woff') format('woff'), 
         url('../fonts/jotting_bold-webfont.ttf') format('truetype'), 
         url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
    font-weight: normal;
    font-style: normal;
}
like image 532
pixielex Avatar asked Dec 10 '10 19:12

pixielex


4 Answers

OK, I figured it out and will document for anyone who has this problem in the future. I had copied the CSS from Font Squirrel and then I had needed to redownload the actual font files later on. I didn't think that would change anything in the CSS, but it turns out that SVG fonts (which are used by mobile safari) all have an ID that is referenced in the font file and the CSS.

So, in:

url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')

webfonttEfFltbI is the font id. I opened the SVG font file in a text editor and found the new ID in the following line near the top of the file:

<font id="webfontC6xdxB57" horiz-adv-x="972" >

Replacing the id after the hash tag in the CSS fixed the problem.

like image 191
pixielex Avatar answered Nov 01 '22 15:11

pixielex


I was having this same situation. I resolved it by updating the paths to the font. Even though Chrome & Safari were loading them fine, iOS wasn't recognizing my path which was

url ('font/chunkfive/font.eot')

I changed that line to include a / to the beginning of the font path and that fixed everything.

url ('/font/chunkfive/font.eot')

You could also try using an absolute path.

like image 31
Matt B Avatar answered Nov 01 '22 16:11

Matt B


Font face isn't supported on MobileSafari until iOS 4.2.

like image 1
Mike Avatar answered Nov 01 '22 15:11

Mike


I had been working with this for a hour before realizing my stupid mistake.

Mobile Safari is CASE SENSITIVE for the fonts, while Desktop Safari is not.

If your font is titled: font.svg, you must add it exactly like it is. If you add it with a Capital F, Desktop Safari won't care, but mobile will.

like image 1
gkrizek Avatar answered Nov 01 '22 16:11

gkrizek