
We switched from an icon font to SVG - kaishiro
http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
======
quarterto
Sidenote:

    
    
      Chrome Canary and Beta were hit with a fairly horrible font bug recently. If
      you haven't yet noticed the bug, fonts have been unloading and reverting
      to a system font after the page has experienced a period of inactivity.
    

Holy shit, I just assumed it was something borked in my setup (especially
since I've been messing with fonts and font paths a lot recently).

~~~
crazygringo
Yup, not just canary/beta -- my up-to-date 31.0.1650.63 on OSX has had it for
at least a couple of weeks now. It's actually the most obvious browser bug I
think I've seen in years, and seems to particularly affect Wikipedia.

~~~
jackweirdy
I just flicked away from this page to wikipedia and noticed exactly what you
described on the same version of Chrome. Weird!

------
ward
As someone who does not allow his font choice to be overriden, yes please.
Fonts shouldn't be used as icons, it has felt wrong to me since wingdings.

Document Font Toggle ( [https://addons.mozilla.org/en-
US/firefox/addon/document-font...](https://addons.mozilla.org/en-
US/firefox/addon/document-font-toggle/) ) helps for the few sites I use
frequently enough that do this, but I still don't like the inconsistency in
looks it gives across websites then.

~~~
fit2rule
>Fonts shouldn't be used as icons

The problem is that fonts _are_ icons, in that they are arbitrary collections
of curves, shapes, and symbols, which communicate meaning only to the end-
user, and are highly dependent on the end-users understanding of what the
thing is that they are clicking, will do.

An icon, a font symbol, a glpyh, a ligature - these are all mere lines in the
sand. You want to make another file-format with that, kid?

~~~
ronaldx
You can use whatever curve, shape and symbol you like, but the unicode U+0079
should essentially represent the letter 'y' (rather than 'umbrella'): that's
precisely the point of it.

If I don't get your symbol, I should be able to revert to a font that I do
get.

~~~
fit2rule
Symbols are random things that mean nothing until someone says it. If you and
I agree that U+0079 is 'y', then so be it. But lets use the other namespaces
of the index, too .. and in that regard .ttf has _much_ to offer the aspiring
user of the format. Problem is, a shallow look at it, of course, renders the
conclusion that it is an investment; but if I know for sure my glyphs render
the same way for grandma, no matter if she's using it on some grungy screen,
somewhere, then I'm okay with letting the heart-beat monitor screen be
composed mostly of cache-able sub-functions derived from somewhere_safe.ttf.

On the other hand, using SVG to pre-load values, then modifying the decomposed
stack, somewhere appropriate, in order to attain sustainable realtime SVG
rendering performance .. seems as if its a matter of principle. Could it be
the jury is out until someone says screw it, and bases the entire OS of their
new device on SVG, alone, and not much else?

~~~
taeric
I think the recent xkcd about symbols is very relevant here, interestingly. As
more and more folks were having fun with icons, whether fonts or otherwise, to
represent things, it is hilarious how many more slight variations of a symbol
I had to learn. Only to usually have sites revert back to using the words at
some point.

[http://xkcd.com/1306/](http://xkcd.com/1306/)

That is, arguing that symbols are random seems silly. The whole point is that
there is a _large_ base of agreed upon symbols affixed with meanings already.
They can even be combined to form different _already agreed upon_ symbols.

------
kaishiro
As an aside from the post's content, I really dig the use of counter arguments
directly within the article. Not sure if this is a thing or not, but I'm going
to start using it.

~~~
ctrl
True strike, it should be a trend.

------
barrkel
I disable third-party fonts primarily because of the poor choices of
"designers" out there, but also in case they become an attack vector. As a
result, I need to use a combination of guesswork, tooltips and URLs on the
status bar when navigating some of the more fashionable sites.

Strong vote in favour of SVG from me.

~~~
Smudge
I'm curious. How could web fonts become an attack vector?

~~~
legulere
Bug in the truetype font JIT compiler. Note that windows does this in the
kernel.

It happened before: [http://technet.microsoft.com/en-
us/security/bulletin/ms11-08...](http://technet.microsoft.com/en-
us/security/bulletin/ms11-087)

~~~
mjs
Are you sure you mean JIT? That page doesn't mention JIT anywhere, and I can't
think how a JIT would be very useful in a font engine. Maybe extremely
complicated Unicode combining characters?

------
debaserab2
Weird. Citing Opera mini as a reason to switch from icon fonts to svg, despite
the fact that IE8 and back does not render SVG's. I'm willing to bet the
latter has a large audience share.

I would add a counter argument to "it feels hacky" because to me, it feels
like the perfect solution: icons are symbols that we use to explain things,
just like words.

The font format in particular seems perfect for this:

\- One single download to get your entire icon set

\- Font rendering engines have been around long before web browsers, so they
are relatively mature on all platforms

\- Scales just as nicely as SVG

~~~
aaronem
Sure, all of those things are true.

Then you run into someone like me whose eyes are not as young as they once
were, and who doesn't care to be abused with whatever happens to be the
stylish designer's font palette _du jour_ , and who therefore uses his browser
settings to apply a minimum font size and a set of preferred typefaces which
page styles aren't allowed to override, and then everything goes to hell.

Can you argue that it's my fault, not yours, that your page doesn't render
well under the requirements I impose on the web content I consume? Sure, you
can so argue. But every time you have to make that argument with a user, even
if you win the argument in that instance, you're still both limiting your
potential user base and risking a perception that you're less concerned with
your users' needs than with satisfying your own desires.

~~~
debaserab2
I'm going to go out on a limb and suggest that if you're applying font size
minimums and enforcing certain typefaces, you're probably fairly use to a web
experience that isn't as the web developer / designer intended. I don't know
anyone who QA's their designs with different browser font sizes.

~~~
aaronem
_I_ do; it's not very hard to build a layout which looks like what the
designer intended for those who don't enforce font sizes or faces, and which
also behaves gracefully for those who do (e.g., no text spilling out of its
containers, &c.) You might be surprised how little effort that takes, and I
think the result is much better for it.

------
peeters
It always seemed to me that the benefits of icon fonts would be fleeting.
Their popularity has been directly correlated with monochromatic icons being
"in-style".

Eventually such fonts will inevitably fall out of style. When that happens,
will we be left with a useless ecosystem surrounding a fundamentally
inflexible core? Or will font rendering engines have evolved to adapt?

~~~
justinph
Not to be pedantic, but letterforms are fundamentally chain-able icons and
those have been around since written language.

More contemporarily, other marks/icons we now would think of as standard are
really icons for language control or words themselves. Typographers have been
using monochromatic marks and glyphs since the dawn of the printing press.

So, not a flash in the pan.

~~~
aaronem
Typographical symbols work in part because they exist within a specific
problem domain whose practitioners are trained to understand them, and also
because the constraints of their native domain privilege function (expressing
some directive regarding how a given chunk of text should be typeset) over
form (the look and feel of the glyphs themselves). Neither of these properties
seems likely to be guaranteed for the much more general domain in which web
icons exist.

------
gisenberg
SVG rendering performance leaves a bit to be desired:
[http://codepen.io/adrianosmond/pen/LCogn](http://codepen.io/adrianosmond/pen/LCogn)

~~~
acdha
That's a fairly extreme outlier, though – other than font/icon preview pages,
how many sites want to display hundreds of different icons in rapid
succession?

~~~
gisenberg
In my experience, you can see noticeable performance losses pretty quickly on
mobile devices in as few as 9 on-screen icons, especially in cases of animated
elements.

edit: caveat for animated elements.

~~~
acdha
That fits with what the Sencha team reported for iOS 7 - big wins for static
SVG but bigger losses for animation:

[http://www.sencha.com/blog/the-html5-scorecard-the-good-
the-...](http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-
the-ugly-in-ios7/)

------
51Cards
Is it just me or is the OP's page font very difficult to read? On my system it
seems low contrast and blurry, almost out of focus. I had to abandon reading
the post by the 3rd paragraph, ironically because my eyes couldn't handle the
font choice.

~~~
airencracken
It isn't just you. It's hard as hell to read. Blurry and it seems stilted in
several ways, as if alignment is off.

~~~
fdavison
Same here. Tried latest FF, Chrome and IE and all looked blurry. Win 8.1 with
a 1080p monitor.

------
smackfu
>We use a custom font on lonelyplanet.com...

Does anyone know why exactly the font they are using on Lonely Planet looks so
terrible in Windows Chrome? Is this because it's not hinted?

Screenshot: [http://i.imgur.com/8W40ns4.png](http://i.imgur.com/8W40ns4.png)

vs. Safari on OS X:
[http://i.imgur.com/Gk9Bfg2.png](http://i.imgur.com/Gk9Bfg2.png)

Edit: Ah, this blog post discusses it: [http://www.dev-metal.com/fix-ugly-
font-rendering-google-chro...](http://www.dev-metal.com/fix-ugly-font-
rendering-google-chrome/) I'm surprised people don't consider this a
dealbreaker, considering the market share of Windows Chrome nowadays.

~~~
tdj
It's a horrible thing indeed, especially when trying to use a print-optimized
font. Luckily the canary version uses the fancy Windows font rendering
pipeline so it's merely a matter of time.

We ended up applying a text shadow of 0.15px to smooth out the eaten-by-mice
effect. It's a bit softer, but a good compromise. Fonts with good hinting seem
to work better.

------
pornel
I often see font icons that are done poorly. It's not a problem with the
concept, but implementation:

* Irrelevant/meaningless characters used without textual label, which is total crap from accessibility perspective.

* Icons littering text copied to clipboard.

* Awful loading performance. Browsers optimize image loading very well: preload scanner, async loading, fetch priority, multithreaded decoding, but custom fonts almost always only start downloading after CSS is fetched, parsed and applied to the document (in order to avoid loading unused fonts), which delays loading by a network roundtrip + CSS processing time and either delays rendering or causes extra reflows.

I hate seeing 99%-loaded websites with hidden text so much that I've
completely disabled support for Web Fonts in my mobile browser. That's a huge
improvement overall, but makes font icons a collateral damage.

------
iconfinder
Icon fonts have always been kind of a hack. SVG is the right formats for many
reason - the primary reason: it's XML. We just need better browser support.

------
eridius
> _We consider a small subset of our icons to be critical to the user 's
> experience but we don’t think that way about our font or the other icons._

Why don't you consider your font to be critical? In my experience, with
Safari, if you use a custom font, text won't render at all until the font has
loaded.

~~~
ianfeather
We consider the system font critical, and we render the page with that because
it it will load instantly. The custom font is then loaded after the content
and used on the following page.

Note: this setup is only used sparingly on our site as it has been waiting for
this piece of work to be completed.

~~~
eridius
Curious, the first time I read your post, I saw exactly what I described,
which is all text was missing for a second, and then appeared in the custom
font.

But when I try now, I get the system font for a second, then it switches over
to the custom font.

------
ZeroGravitas
I noticed one of the icons he refers to was a tick/check mark. But those are
present in Unicode:

[http://en.wikipedia.org/wiki/Tick_%28checkmark%29#Unicode](http://en.wikipedia.org/wiki/Tick_%28checkmark%29#Unicode)

Does that make it an exception compared with say, the icon for facebook?

------
orthecreedence
How about switching the font on the blog too? It's barely legible.

------
csense
Please, please kill icon fonts. Redefining special font characters for
graphics is just asking for all kinds of cross-platform browser compatibility
trouble.

------
ahoge
> _As we were just duplicating the same icon multiple times within the same
> file, it compressed down to the size of just one icon_

SVG allows you to create clones with the `use` element. Any style which wasn't
set by the original can be set by the clone.

E.g. if you don't set `fill`, the original will be filled with black and the
clones can be filled with some other color.

~~~
ianfeather
Does this work when you reference svgs within css though? Or do you need to
have access to the svg nodes?

~~~
ahoge
You do that inside the SVG. Instead of having a yet another path or a group of
paths, you just have that `use` element (which just references some other
node).

Basically, it lets you reuse something, but you can transform it and set some
styles.

[http://kaioa.com/svg/chemicalzen3.svg](http://kaioa.com/svg/chemicalzen3.svg)

[http://kaioa.com/svg/chemicalzen3_parts.png](http://kaioa.com/svg/chemicalzen3_parts.png)

The "master" shape is used to create the outline and it's also used to clip
the "interior" layer.

[http://kaioa.com/svg/armyofclonesani.svgz](http://kaioa.com/svg/armyofclonesani.svgz)

There is just one dude. Then there is a row of clones. And then there are
transformed clones of that row. Only the original dude is animated.

Edit: A big benefit of clones is that they are always in sync. If you change
the shape of the original, the clones follow suit.

~~~
ianfeather
That's awesome. Very very cool. Will look into it, thanks!

------
aaronem
An excellent article.

I've never been really fond of icon fonts, but they've appeared to have some
pretty compelling advantages not easily obtainable otherwise; I'm glad to see
such a well-reasoned article describe a means of replacing them which has most
of the same advantages and what looks to be a considerably narrower range of
drawbacks.

------
mrottenkolber
Thank you. I think icon fonts are the worst web-trend since a while. (Because
I disable external fonts for readability.)

------
wernah
Just throwing it out there: are paint times effected by the implementation of
svg's? I don't remember exactly but I do recall a situation where svg was
causing jankiness. Probably not wholly responsible, but I want to know if
anyone else ran into this.

------
smoser
I don't know if this is related to blog post but the 'Sign in' button just
showed 'Si' until I hovered over it. I'm using the latest Safari.

