The iPad and SVG fonts in Mobile Safari
With all this hype around the iPad, people keep asking if the iPad supports webfonts . The good news is: Yes, it does. The bad news: the iPad runs Mobile Safari and in contrast to the standard version of Safari only SVG fonts are supported.
With all this hype around the iPad, people keep asking if the iPad supports webfonts. The good news is: Yes, it does. The bad news: the iPad runs Mobile Safari and in contrast to the standard version of Safari only SVG fonts are supported.
Oh my gosh! Yet a another font format for the web? EOT for Internet Explorer. TTF/OTF for Safari & Opera. WOFF for Firefox 3.6 and now SVG fonts for Mobile Safari? Unfortunately, yes!
But what are SVG fonts anyway? Is this a good webfont format? Actually, it is not a webfont format at all. The purpose of SVG fonts is to be embedded inside of SVG documents (or linked to them), similar to the way you would embed standard TrueType or OpenType fonts in a PDF.
SVG fonts are text files that contain the glyph outlines represented as standard SVG elements and attributes, as if they were single vector objects in the SVG image. But this is also one of the biggest disadvantages of SVG fonts. While EOT, WOFF and PostScript-flavoured OpenType have compression built into the font format, SVG fonts are always uncompressed and usually pretty large. For example, our Graublau Sans Web fonts have just 61 KB as OpenType PS, but 172 KB converted to SVG.
This is how a SVG font (reduced to 2 glyphs) looks like
But there is more bad news: Since SVG fonts are just a collection of vector shapes, there is no way to store hinting information. Font foundries such as FSI have put a lot of effort into optimizing their Web FontFonts for small sizes on screen using elaborate TrueType hinting. But when you convert such a font to SVG all these information will be lost.
So, SVG fonts are not really an alternative to the other webfont formats. In 2008 Apple fueled the webfont revolution with the release of Safari 3.1 with support for webfonts in TrueType or OpenType format. It’s understandable that this support was deactivated in Mobile Safari for the iPhone. The screen is very small and the use of downloadable fonts hardly justifies the loading times and traffic costs of the webfonts. But this is now changing with the iPad. The resolution of the iPad in landscape mode is equal to the standard minimum resolution used for almost all websites today. The internet on the iPad is not a light version for mobile devices. So there shouln’t be any limitations either. Steve Jobs said in his iPad keynote:
»Those devices need to be far better than a laptop or the iPhone at some key task—things like browsing the web.«
But without support for real webfonts format such as WOFF and EOT, browsing the web with Mobile Safari is not really better. So I am really hoping that Apple will include true webfont formats in Mobile Safari—preferably WOFF which is also missing in Safari but has a good chance of becoming the webfont format in the near future.
The site about webfonts, but by default, no true webfonts supported on the iPad
If you want to use webfonts on the iPad today, you need to provide SVG fonts. To convert your fonts to SVG you can use applications such as FontForge or the @font-face generator from Font Squirrel. With the webfont services from Typekit and Typotheque you also get (experimental) SVG fonts support.
The Typekit homepage with experimental SVG fonts support
Linking SVG fonts in your website is similar to using any other webfont format. You just add another line to the @font-face rule in your CSS:
Note that the file name is followed by a hash tag. This relates to the font ID, which you will have to set while converting the font to SVG. The reason for this is, that multiple fonts can be embedded in a SVG document and therefore an identifier is required.
The rest is here:
The iPad and SVG fonts in Mobile Safari