Using CSS @font-face with the iPad/iPhone
Solution 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")
Solution 2
it could be the converter your using - or perhaps iPad caching. best font site in the world:
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.
Solution 3
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;
}
Natti Baron
Updated on December 03, 2020Comments
-
Natti Baron over 3 years
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.