Comments on: Webfonts and Mobile Devices

By: Mike Lewis

Mike Lewis — Fri, 29 Jan 2010 02:17:15 +0000

Just wanted to point out that word-spacing and justify with SVG fonts are broken with webkit browsers at the moment. I filed a bug so hopefully it will get fixed (there’s an example on the bug)

https://bugs.webkit.org/show_bug.cgi?id=34236

I’d say webkit support for SVG fonts is only half there.

By: Font-face Support Table « greenideas

Font-face Support Table « greenideas — Fri, 04 Dec 2009 19:27:06 +0000

[…] go ahead and publish it. For an in-depth explanation of how I got these results, check out this post. In a nutshell, it shows that all of the main desktop browsers support some kind of @font-face […]

By: Louis-Rémi Babé

Louis-Rémi Babé — Wed, 11 Nov 2009 02:13:54 +0000

I’m really glad that custom fonts finally made it to the Open Web. I do, however, agree with the choice made by Mobile Web Browsers implementors, not only for load time AND memory usage, but also for readability.

By: matt

matt — Wed, 11 Nov 2009 01:19:03 +0000

@Paul Irish

Thanks, man!

That’s correct about the font stack degradation. If you add ‘serif’ after your iffy @font-face font, it will fall back to the default serif at the correct size. It’s worth noting that I was only able to get that behavior out of my actual device, and not from the Xcode iPhone Simulator.

As regards the return value from getComputedStyle(), you may have a point. I’ll have to do some more digging into how that works. And in answer to your question, (Desktop) Safari will happily return the font family when it’s an SVG font, although as you point out, that’s not super meaningful.

So yeah, I’ll do some more digging into getComputedStyle() and see if we can’t tease out something more useful. There’s definitely still plenty of work to be done.

@Louis-Rémi Babé

You’re certainly right that sending giant font files over 3G or worse can get you in trouble. Nonetheless, it’s another tool in the toolkit, and shouldn’t be eschewed if used mindfully.

By: Louis-Rémi Babé

Louis-Rémi Babé — Wed, 11 Nov 2009 01:00:23 +0000

This is a really valuable piece of info.
For performance reasons it’s actually a good thing that Mobile Browsers do not allow for custom fonts.
Nowadays developers have to cope with the fact that their site won’t look exactly the same everywhere, anyway.
The fact that the user or useragent has more control over the presentation than the developer is a feature of the Open Web, not a bug.

By: Paul Irish

Paul Irish — Wed, 11 Nov 2009 00:03:21 +0000

Awesome research, Matt! This is killer.

If I recall correctly, only Opera will report the actual font from the font-family stack that it used. Everyone else throws back the entire font stack to getComputedStyle()

From what I and Jonathan Snook have seen only the Mobile Safari within iPhone OS 3.1+ supports SVG webfonts. 3.0.1 users are out of luck.

You seem to be implying that if your font-stack is something like:
font-family: “ChunkFive”, serif;
.. and ChunkFive isn’t working, then it’ll use the system serif and the sizing will match what you expect. Correct? That’s a really good gotcha to know.

Curious: what does getComputedStyle() return for font-family when SVG is used? Just empty string? Seems like a bug worth reporting to WebKit.

Again, great stuff, Matt.