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

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

 image/svg+xml 

Answer 2

TransType, a specialised tool to convert font formats, can also produce @font web-font files with one click. Unlike fontsquirrel this works for both Latin and non-Latin fonts such as Arabic. http://www.fontlab.com/font-converter/transtype/ However pages using these @fonts seem to work on desktop browsers and ipad ios8, but not on iphones ioS8

Answer 3

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 4

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 5

I was using FontAwesome and I had the same problem. The issue is that the .svg# identifier doesnt match what is actually in the .svg file.

In the file you'll see: <font id="FontAwesomeRegular" horiz-adv-x="1843" >

To get your icons to not appear as squares change this line in the font-awesome.css file

Changing this line:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

to this line

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 6

Also, what is the right syntax for the # in the svg url declaration? what does it stand for?

It's the reference to a particular <font> or <font-face> element in the given file. You can have any number of svg fonts/font-faces inside the same svg file, even though it's most common to only have one.