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 https://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

This is an old question, but I figured nobody answered it yet and I was having the same problem earlier.

The # in after the SVG url denotes the SVG font's ID, and it's not going to work if the string after # doesn't match the SVG font's ID. If you open up the SVG file, you'll see a tag like this:

<font id="webfontSRj8j0PE" horiz-adv-x="1058" >

This is for the BEBAS font, but if it was for your Handvetica font for example, you'd have to type in url("Handvetica.svg#webfontSRj8j0P") format("svg")

Answer 2

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.