Downside of SVG - Fonts

My third attempt at conversion to SVG is a logo with text. I spent about 4 hours doing it, because it's got 16 different SVG elements without counting the linear gradients (which are creating using elements instead of CSS it turns out). In the end, it looks really great, and the text resizes smoothly in a way that you normally requires javascript:

SVG:

Original PNG:

---

Here's the thing. If you are reading this post via a Windows or OSX -based PC, then the two should look almost identical. If you are using Firefox on Android the same will apply. However, Chrome, Dolphin, and the Android browser itself, will all render this incorrectly. See the comparison below. The top is Firefox for Android, the bottom is Chrome on Android:



The problem is that the font I'm using is Palatino Linotype, which ships default with Windows and OSX (and somehow Firefox for Android??). Chrome doesn't have it though, and so pulls in the default Chrome serif font. It's thicker and so looks too big.

All of which leads me to a fundamental problem of SVG, which is that it's not prerendered, and because of that it relies on the browser having all rendering resources. If you notice in the comparison, there's another problem. The first letter of each word isn't a large size in Chrome. This is because Chrome doesn't support the CSS rule "first-letter" for SVG text elements. As I take SVG into more complex situations, I'm becoming less sure it is really read for primetime. Which is sad, because when I compare the SVG and PNG versions of this logo on my phone, the clarity difference is striking. I just have to find workarounds to all the things that Chrome is screwing up.

In regards to the font-face, I just need to embed the font or have the SVG pull from a hosted source. If one is using a commercial font, however, one runs into issues. Palatino Linoype costs 150 bucks, so for this particular logo I'm out of luck (unless someone knows a free alternative that looks close enough that most people won't tell the difference??). It can be mitigated by using open-source fonts. As to the first-letter issue, the alternative is to split the text elements into more text elements and apply the large size via classes.

EDIT:

I've started a StackOverflow question about workarounds to the first-letter issue. Hopefully someone will have a clever idea.