I am available for freelance work - HIRE ME

Quick Tip: SVG Fonts & @font-face

posted by Matt Ward on Dec 1, 2011.

In this post we will take a quick look at an issue that occasionally creeps up and prevents the loading of SVG fonts through @font-face. The issue, while quite small and very simple to resolve, has the potential to drive the average developer mad with frustration. Hopefully this quick tip will help prevent that!

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.

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Dec 6, 2011

Alex Danilo says:

Yes you can put all your SVG font assets into a single file and access them by fragment id. That works fine. Another thing you might want to do is compress the SVG file with gzip to make an ‘.svgz’ file – that will greatly reduce the font download size. SVG Fonts are good for other things like Emoji – some demo files are here: http://pagefire.com/demo/ View them in Batik or the Pagefire IE plugin.

Dec 14, 2011

egiova says:

Yep, it’s a good tip. But for any reason, when I met the bug, I made it the other way: I put the XML id instead of @fontface id, and it works properly. So, be aware it works both sides. Thanks the time you spend posting (what I didn’t do by the way).

Jan 6, 2012

Inspiration says:

Thank you for the post! : )

Apr 6, 2012

Mohit Bumb says:

Nice post matt

Jun 5, 2012

Alex says:

Great case study, Matt. I used to do some web development before and now I’m trying to make sure that I’m on the same page with others. You helped me to get the idea of what is happening in the industry now. Thanks a bunch, man.

Mar 3, 2014

Keith says:

I just found your post which was very helpful thanks. Another thing I tried was to convert the complete graphic and font to paths; that way you don’t need to worry about @font-face within the svg file. There may be some cons doing it this way but it was a quick fix for me.

Leave a Comment

Links

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014