Using CSS @font-face with the iPad/iPhone

Question

I'm trying to use the font-face attribute of CSS with a custom font:

@font-face { font-family: "Handvetica"; src: url("Handvetica.eot"); src: url("Handvetica.ttf") format("truetype"), url("Handvetica.otf") format("opentype"), url("Handvetica.woff") format("woff"), url("Handvetica.svg#Handvetica") format("svg"); }

it works on ff, safari & chrome properly.

multiple sites on the web state that to use font-face on iOs devices (iPod/iPhone/iPad) an svg font is required. the fonts were converted using http://onlinefontconverter.com, and i have all of the formats.

the svg font doesn't show on iOs. Does anyone know how to make it work? Also, what is the right syntax for the # in the svg url declaration? what does it stand for?

Thanks.

Answer 1

it could be the converter your using - or perhaps iPad caching. best font site in the world:

http://www.fontsquirrel.com/

generates the correct font face kit, gives you a set of fonts - you can send it your own font (license permitting) and it'll build a font face kit for you. This includes TTF, Woof, SVG,OTF.

Zips the entire thing, CSS, fonts, example and you download it.

Always worked for me.

Answer 2

Could be the server. For the SVG to work you sometimes need the SVG mime type set up:

 image/svg+xml