Quantcast
Channel: Echo Enduring Blog » typography
Viewing all articles
Browse latest Browse all 4

Quick Tip: SVG Fonts & @font-face

0
0


So a couple weeks back I was doing some work on a client website. I had just recently signed up for TypeKit and was using that to serve up the custom fonts for the site. It was working splendidly. The only exception in my early round of testing was on my iPhone 3G. In technology terms, my phone is definitely getting old now, but I am still using it and am running iOS 4.1, which is incompatible with TypeKit. So, instead of getting Adelle served up, I was just getting a standard sans-serif default from my font stack.

Was this acceptable? Probably. Everything degraded gracefully enough, but I really liked that slab-serif appearance and wanted to bring it to the website on my iPhone too. So, without getting into all the gritty details, I downloaded Arvo from FontSquirrel and coded the site so the font would be accessed by the iPhone as required. Everything seemed to be set up properly.

Except that the font was not being rendered.

I spent several hours tearing my hair out trying to figure this one out. I had successfully used @font-face with files from FontSquirrel before, and seen them rendered on my iPhone, so I knew it could be done. I just couldn’t figure out why it wasn’t rendering in this instance.

Solving the Problem

After testing to make sure that my stylesheets were being loaded, and turning off TypeKit to confirm that Arvo was being loaded in other browsers (which it was), I slowly determined that the problem had something to do with the SVG files that I was using. I am by no means an expert in SVG and only understand into conceptual terms. But, as I did some digging through the code of sites I knew were working and the code of the site that I was actually working on, I discovered a strange irregularity.

There is a tag within the XML of the SVG file which looked something like this:

<font id="webfontOTINA1xY" horiz-adv-x="335">

What was interesting about this tag was the id attribute. In the stylesheet supplied in the @font-face kit downloaded from FontSquirrel, the font declarations look like this:

@font-face {font-family: 'ArvoRegular'; src: url('Arvo-Regular-webfont.eot'); src: url('Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'),url('Arvo-Regular-webfont.svg#ArvoRegular') format('svg');font-weight: normal; font-style: normal; }

I have bolded the line specifically relating to the SVG version of the font. Notice the fragment identifier after the file name. When I went back and looked at the site that was working, this value was identical to the id attribute of the font tag in the SVG’s XML. This got me thinking, and I actually went in and changed this id attribute to be the same as the fragment identifier of the @font-face code that was calling it.

As soon as I did that, Arvo was rendering perfectly on my iPhone. It was a ridiculously easy fix that only served to irritate me more, since I had spent several hours working on the issue.

Again, I am not an expert in SVG, but here’s what I think is going on. The <font> tag within the XML seems to contain the entire character set, while the id attribute provides the unique identifier for that particular font. When the SVG file is called within the @font-face declaration, the fragment identifier seems to be required to tell the CSS rendering engine what block of code to use, even though there is only one font declared in the file.

This seems to suggest that you might be able to combine all of your SVG fonts into a single file and then access them through the appropriate fragment identifiers. I have not tested this, though, so if any SVG experts would like to chime in on this one, that would be awesome.

A FontSquirrel Bug?

Don’t get me wrong: I love FontSquirrel. I even listed them in a post about 10 of my favourite online tools for design and development. There does, however, seem to be a slight bug in their kit generation. From what I understand, they build their own SVG files, based on the existing font files for most of their typefaces. So far, they seem to do a pretty good job too—when they work, the type looks great on my iPhone.

For some reason, however, there seems to be this occasional breakdown where the id attribute in the XML will contain some coded identifier and the supplied CSS will use a camel case version of the font name (such as ArvoRegular). It doesn’t happen in all instances, though. It doesn’t even seem to happen consistently with the same fonts. I downloaded Arvo again as a test, and it was fine. Then I downloaded League Gothic, which has always been fine, and I found the discrepancy.

Fortunately, if you are aware of the issue, it only takes a moment to open up the files and do a quick cross reference to make sure everything is working properly. Unfortunately for me, I didn’t know about this and had to figure it out the hard way. After reading this post, hopefully you won’t have that same problem.

Webfonts Moving Forward

Is this SVG thing really a big deal? Maybe not. If you check out the information provided at webfonts.ingo, every major browser now supports @font-face rendering with either TrueType, OpenType or WOFF format fonts (or even all of them). This includes SafariMobile as of iOS 4.2. If this is the case, then do we even need to worry about SVG fonts?

Maybe not in a few years. Right now, though, there are still people running older versions of iOS. I know. I’m one of them, and I don’t want to upgrade because my iPhone is already running slow enough.

That’s enough of a motivation for me to take the time to ensure that any @font-face declarations that I make are working across the board, especially since it’s just a matter of making sure a couple of values line up.

I hope you find this quick tip useful. As already noted, I’m not an expert in this area, so if you have any comments or insights on @font-face or SVG fonts, feel free to share in the comments below.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images