Comments on: The iPad and SVG fonts in Mobile Safari

By: Matt Canvas

Matt Canvas — Thu, 21 Apr 2011 11:43:46 +0000

Is WOFF not ruled out to limit malicious web content?

By: Vekta

Vekta — Tue, 29 Mar 2011 10:49:13 +0000

David: I’ve looked at your link and can see it’s still not displaying on an iPhone. You’re using a pretty complex way to display fonts and I’ve noticed that the JavaScript file you’re using does not contain a link to the svg font, just the (woff|ttf|eot).

Here’s what to do:
1) Remove the JavaScript link from your code
2) Use the font generator at Font Squirrel
3) Copy the @font-face code from the stylesheet.css you downloaded from Font Squirrel, and add to your css file.
3) Ensure that each font links to your actual location
4) Add ‘src: url’ to each line if it’s missing for each link to a font.
5) Change your css H1 to read: font:60px/62px “Tiza”, Arial, Helvetica, sans-serif;

This should now work!

By: David

David — Wed, 01 Dec 2010 16:31:50 +0000

I would be very grateful for some input here. On a full browser, we are displaying Tiza font OK (bought it as a web font from myfonts.com).

On an iPhone running 4.2.1 I am not seeing this font displayed. Is this something I can set using the info here?

Here is how it is supposed to display: http://quillcards.com/ecards/sample

By: Alex

Alex — Wed, 24 Nov 2010 12:55:56 +0000

From my very quick testing, Safari under iOS 4.2 does indeed support TTF/OTF/SVG fonts.

http://imgf.tw/410667989.png

There seems to be an issue with font-weight though, didn’t get much of a chance to investigate it.

By: Alan

Alan — Thu, 28 Oct 2010 08:33:57 +0000

The meta tags do not appear in the window but they exist in my source code (html, head, style, body, etc…)

By: Alan

Alan — Thu, 28 Oct 2010 08:31:29 +0000

Sure. Just tested it on my iPad.
Works both on iPad’s Safari and even using a UIWebView app.
Here is the code I used with the ttf font file in the same folder:

@font-face {
font-family: “Existence”;
src: url(“exlight.ttf”);
}
body { background-image:url(‘background.jpg’);
font-family: “Existence”, Verdana, Sans-serif;
color:yellow;
font-size:30px;
}

Hello World with nice font

By: Ralf Herrmann

Ralf Herrmann — Thu, 28 Oct 2010 08:13:21 +0000

Are you sure? Do you have a test case? I haven’t heard this before.

By: Alan

Alan — Thu, 28 Oct 2010 08:08:25 +0000

I just realized the dates are listed for each post… duhhhh….
But anyways my comment still applies…

By: Alan

Alan — Thu, 28 Oct 2010 08:06:11 +0000

I dont know when this post was written, but I can tell you that @font-face works with ttf files on iPad, iOS version 4.2.
Both on Safari and UIWebview.

By: dshsdg

dshsdg — Tue, 29 Jun 2010 15:01:21 +0000

No hinting, oh please, just make a list of fonts to fall back on.
No big deal.

No-subpixel rendering? Hmn, this has more to do with the implementations than with svgfonts itself.

It’s possible to do subpixel-rendering on svg elements.
This means it can also do glyps in theory.

http://www.antigrain.com/about/index.html

It would be interesting to see the woff container with svg fonts in it. It can do the compression which could make svg fonts about the same size as the others. Possibly in favor of svg fonts for some things as a poster has discovered.

By: Hamranhansenhansen

Hamranhansenhansen — Tue, 15 Jun 2010 09:20:50 +0000

What about the other mobile browsers? Do any support Web fonts? We tend to compare iPad to PC’s but it has half the RAM of a Nexus One.
.

By: Chris Lilley

Chris Lilley — Wed, 21 Apr 2010 18:04:02 +0000

I would be interested to know more details on implementations which fail with gzipped SVG fonts.

WOFF is gzipped internally on a table by table basis.

By: Garrick Van Buren

Garrick Van Buren — Wed, 21 Apr 2010 16:53:01 +0000

I’ve had unstable results with gzipped SVG fonts. So Kernest doesn’t deliver them gzipped – same with WOFFs.

By: Chris Lilley

Chris Lilley — Wed, 21 Apr 2010 11:22:30 +0000

Opera does indeed support kerning in SVG fonts.

Gzipping typically results in a 60-70% file size reduction.

Hinting is good, when type is rendered axis-aligned to the pixel grid and at integer pixel sizes. For rotated, skewed text at arbitrary sizes and orientations hinting can’t help. We considered adding hinting to SVG fonts but could not figure out a way to do it that would work in all cases.

Hinting is also (at least, TrueType hinting) considered a program, and thus has different IPR than the glyph outlines in some jurisdictions.

By the way, SVG fonts are common on mobile devices such as phones. They are not specific to Mobile Safari or to iPad.

By: Dustin Wilson

Dustin Wilson — Sat, 17 Apr 2010 15:39:11 +0000

SVG fonts are really just for things like logos where you wouldn’t want sub-pixel rendering and hinting for, yet still be able to select it as text. AFAIK there’s no plans to support either, and it’d be a shame if they did as this particular use case would die before browsers (except Opera) ever got a chance to show it off. The iPad and iPhone might as well not have webfonts support at all.