SVG Web Fonts Suck

on

The primary reason we need SVG fonts is because Mobile Safari on iPhone and iPad only accepts SVG fonts. For the love of God, don’t do it. At least don’t do it now. Here’s why.

Broken Text Selection

As pointed out by many, text selection with SVG web fonts is currently broken in WebKit. You cannot select random text. You can only select the first word of a line, a whole line, or a whole paragraph. This is a very serious usability problem. Users will be really frustrated if they cannot copy and paste the text when they want to.

Crashing Mobile Safari

Multiple font variants (weights/styles) will randomly crash Mobile Safari on iPhone and iPad, as reported by TypeKit. I can personally verify this as I’ve encountered it quite a few times.

Slow Rendering on Mobile Devices

Turns out rendering SVG fonts is not as efficient as TrueType/OpenType, and rendering is slow on mobile devices with a not-so-powerful processor. For example, Mobile Safari on iPhone 3GS demonstrates noticeable delay while rotating or zooming web pages using SVG fonts. It also drains battery. Bad user experience.

Slow Downloading over 3G

Downloading web fonts over 3G connections is non-trivial. It’s slow, and for users without unlimited data plan, it also eats up traffic quota. Since you cannot tell if a user is coming over 3G or WiFi, the best bet right now is to stop serving SVG fonts at all. Only Mobile Safari needs them. Desktop versions of browsers will accept TrueType/OpenType anyway.

Missing Characters

Some important characters like typographic apostrophes and quotation marks are missing in some fonts served from Google Font API in SVG format. (e.g. Droid Sans used on this page). If you see blanks in this brackets (“”‘’) using Mobile Safari or Safari with iPhone user-agent string, you have the problem. This is also reported by TypeKit and seems like a conversion error. Web fonts in TrueType/OpenType don’t have this issue.

Workaround

For iPhone one way to avoid this is to use a separate stylesheet and CSS media query. But for iPad it’s a different story. Usually you want to deliver the same full version of your website to iPad users since iPad has a big enough screen, but you should avoid serving SVG web fonts. Currently Google Font API has no way to specify what formats to ignore. I’ll submit a suggestion to them later. I submitted a feature request for optional specifying font formats. Please vote for it here.