4 ms·
The real benefit here is that you can export these as SVG. Please do this instead. Icon fonts are convenient, but they're really bad for web performance. It
by SquareWheel 6y ago
The real benefit here is that you can export these as SVG. Please do this instead. Icon fonts are convenient, but they're really bad for web performance. It needs to download the entire font even if there's only a handful of icons on a page.
SVGs have excellent browser support, and decent CMS support. You can enable them in Wordpress for example with a little tinkering. If you want to make your site faster (and I hope you do), then definitely consider SVGs.
- EveYoung 6y agoOr get the SVGs from Github directly: https://github.com/google/material-design-icons https://github.com/google/material-design-icons
- ficklepickle 6y agoKeep in mind the quantity of DOM nodes being rendered, especially on mobile. For example, this[0] page loads too slowly on low-end mobile, even though each individual SVG is aggressively optimized to be a tiny file size. I need to replace them with PNG/WebP. The file sizes would increase, but overall performance would be better (I have tested this). Now these are illustrations, which are more complex than icons. 0 - https://justtrivia.fun/categories https://justtrivia.fun/categories
- SquareWheel 6y agoGood point about DOM size. I wonder if using external SVGs would have had the same effect? I don't know enough about browser rendering to know if that matters.
- pests 6y agoSemi related but there was a HN post a few weeks back about a tool that would scan your site and then modify the font file to only include the characters or icons you actually used. I still think SVGs are a better option.