5 ms·

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. A

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.

Hackbraten 6y ago
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?
- Klonoar 6y ago
  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.
Ensorceled 6y ago
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,
- zimpenfish 6y ago
  > 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?
  - sombremesa 6y ago
    What is "use my fonts"? I've never heard of such a thing.
    - zimpenfish 6y ago
      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.
jmull 6y ago
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.)
ascom 6y ago
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.
kragen 6y ago
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?
ourcat 6y ago
Useful for supporting `font-size` too, when inline with text (eg: for a label/button with an icon).
- kevincox 6y ago
  You can do this by sizing via `em` which is based on the text size.
  - ourcat 6y ago
    That's right. `em`, `rem` or `px`.
    - kevincox 6y ago
      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.
pippy 6y ago
with tools like this: https://github.com/tancredi/fantasticon 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'.

Hackbraten 6y ago

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?

Klonoar 6y ago
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.

Ensorceled 6y ago

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,

zimpenfish 6y ago
> 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?
- sombremesa 6y ago
  What is "use my fonts"? I've never heard of such a thing.
  - zimpenfish 6y ago
    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.

jmull 6y ago

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.)

ascom 6y ago

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.

kragen 6y ago

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?

ourcat 6y ago

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

kevincox 6y ago
You can do this by sizing via `em` which is based on the text size.
- ourcat 6y ago
  That's right. `em`, `rem` or `px`.
  - kevincox 6y ago
    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.

pippy 6y ago

with tools like this: https://github.com/tancredi/fantasticon 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'.