Web Fonts Collateral Damage of Ad Blockers

Re:Web Fonts Collateral Damage of Ad Blockers by equil on Sunday October 04, 2015 @01:46AM (#10326630)

I hope this entices developers to reconsider the use of private use area (PUA) [0] based icon fonts for key navigational elements. I see them used time and again, and a slow connection or spotty CDN can render these sites unusable. [1]

If you absolutely have to use icon fonts, at least use ligatures instead of a PUA. That lets you fallback to a whole word if the specific font isn't present, or if the user relies on assistive technology like a screen reader.

[0] https://en.wikipedia.org/wiki/Private_Use_Areas

[1] http://i.imgur.com/GR9Jk2b.png

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by Sephr on Sunday October 04, 2015 @04:14AM (#10326877)

There is even an actual Unicode symbol for the left-pointing magnifying glass ([1]) that they are using, yet they use the PUA anyways.

I use the [1] Unicode symbol semantically on my blog with a custom font at http://eligrey.com/blog/

1. Edit: Hacker News seems to have stripped the character from my message. I am referring to U+1F50D left-pointing magnifying glass.

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by tombrossman on Sunday October 04, 2015 @05:33AM (#10327019)

NB I still get a broken character and not the magnifying glass on your site: https://imgur.com/a/3Rb7t

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by ChrisGranger on Sunday October 04, 2015 @06:51AM (#10327172)

I've made a point of installing a variety of extra Unicode fonts like Symbola, and I still find sites with characters that don't render properly. I do see the magnifying glass on the parent comment's site though...

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by devit on Sunday October 04, 2015 @06:01AM (#10327071)

I think the main problem is that popular icon fonts like Font Awesome don't use ligatures.

Is there any reason why they don't? It seems it would indeed be much better.

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by tombrossman on Sunday October 04, 2015 @03:34AM (#10326803)

Thanks for explaining the issue so clearly. I see this a lot after installing Privacy Badger and I wondered what it was called. In the rare instances that I needed one of these for page navigation, I've just hovered the mouse pointer over it and guessed at it's purpose by looking at the URL. It's one of those things that are an annoyance, but not quite a big enough issue to spend my time solving it or learning the cause.

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by mirimir on Sunday October 04, 2015 @05:58AM (#10327064)

Same here. I knew that something was broken, but meh ;)

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by gherkin0 on Sunday October 04, 2015 @03:20AM (#10326778)

Me too. I blocked web fonts in Firefox because a lot of them rendered text like trash when I had font anti-aliasing/sub-pixel rendering disabled (I prefer blocky-crispness to blurry-smoothness). Those stupid icon fonts have been the collateral damage.

And what's the point of sticking a handful of icons into a downloadable font rather than just downloading a few images?

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by antod on Sunday October 04, 2015 @03:48AM (#10326828)

> And what's the point of sticking a handful of icons into a downloadable font rather than just downloading a few images?

Some reasons:

* They are scalable vector images without the download bloat and processing load of rendering them with SVG.

* Raster icons need to closely match the screen DPI or they look awful - eg Retina displays made raster icons look like blocky pixellated afterthoughts.

* They inherit colors, sizes etc from CSS the same way as their surrounding elements.

[ Parent | on HN ]

Re:Web Fonts Collateral Damage of Ad Blockers by godDLL on Sunday October 04, 2015 @12:22PM (#10327928)

Like this? http://fontello.com/

[ Parent | on HN ]