Using SVG icons instead of web fonts
Posted by gregster on 12 Nov 2018 in Announcements
We've been discussing switching from woff fonts to SVG for site icons. Some of the problems we have with web fonts (woff etc.) are:
- Line height and rounding issues look slightly 'off' (spinner icon seems a bit wonky, vertical alignment is off by a pixel or two, etc.)
- Editing web fonts relies on external service and rebuilding each time we add an icon
- Using unicode addresses for all glyphs is impossible (*).
* To maximize design flexibility we have included multiple versions of, say, a map icon. We cannot give both of them the same unicode address. To overcome this we'd need multiple fonts.
Also, sometimes it's impossible to find a unicode address for the glyph you want to use - so you use a private use area address, or you abuse an orthography glyph because it looks similar to your icon/glyph - see hamburger menu.
So, to explore the implications of making this switch I built a test file that uses 4 methods of doing this, along with my recommendations.