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

Question

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 do

Answer 1

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:

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