Hacker News Reader

Comment by flowerlad | Hacker News Reader

Couldn't disagree with this article more. SVG is not as performant as fonts. Fonts are highly optimized by operating system and performs much better than SVG. Accessibility concerns mentioned are not valid because role and aria attributes can be used to solve those problems.

View on HN

Agreed, font icons are almost always associated with actions (buttons etc.) or status (e.g. on/off/paused) which need their own appropriate roles and attributes. I lead a team that made a large website fully AODA[1] compliant and we used font icons EVERYWHERE.

[1] Accessibility for Ontarians with Disabilities Act,

> we used font icons EVERYWHERE.

How does that work with people who have "use my fonts" ticked for whatever reason? Is there some kind of override that applies?

What is "use my fonts"? I've never heard of such a thing.

For when you want to use your own fonts instead of the (sometimes horrifying) choices of the webpage author - e.g. if you're dyslexic, have sight issues, or just want to use a font you can read more easily.

Firefox calls it "Allow pages to choose their own fonts, instead of your selections above." Safari lets you use a custom stylesheet to enforce your font choices - Chrome did too but it sounds like they've removed that option. In all 3 cases, I think there's extensions which will also do this for you.

Can confirm - in a large React app, SVG Font Awesome icons constituted a disproportionate amount of time spent rendering. Switching to the icon font dramatically improved performance.

Hmm, that's really interesting! Does that mean we can get more efficient vector graphics in browsers by converting them into TrueType fonts with a single glyph, then displaying it in a huge font size?

Even if you’re right and fonts are rendered much faster than SVG:

1. At that level, do you really believe anyone will notice?

2. How does the faster rendering even make a dent in the increased load times from which your users will suffer as their browser downloads the whole font with all its glyphs they don’t need?

Re: 2, it's very possible to just bundle the glyphs you use, at which point it's about the same amount of work as picking and bundling individual SVGs.

I prefer to use SVGs (I find animation and styling with them easier) but I agree with the OP of this thread that properly bundled icon fonts aren't that big a deal.

with tools like this: https://github.com/tancredi/fantasticon using font icons is pretty easy to use. The biggest issue I found with font icons was getting upskilling new devs. online tools are clunky and explaining how to use it was always a pain. sometimes i'd wind up just saying 'use an svg'.

Not sure your performance claims are valid without (1) profiling the performance and (2) accounting for the different access patterns/performance concerns between rendering text and icons. (That is, the dominant pattern in rendering text is rendering strings of characters in a line/rectangle, while for icons it's a relatively much smaller number, one at a time.)

Useful for supporting `font-size` too, when inline with text (eg: for a label/button with an icon).

You can do this by sizing via `em` which is based on the text size.

That's right. `em`, `rem` or `px`.

rem and px won't be based on the size of the surrounding text. rem is based on the size of text on the HTML (IIRC) element and px is based on display pixels.

Reply on news.ycombinator.com