Web Fonts for images are a true anti-pattern. It's actually almost funny how many pages are full of ſ and so forth, because they assume that folks are using a graphical browser running JavaScript.
We're at the point where, depending on your exact industry/usecase, earlier IE versions are less than 1% for a lot of 'mainstream' sites. The amount of people who aren't able to render a custom web font, let alone a non-graphical browser, would be in the extreme minority.
IMHO, that is not a use case that's not worth worrying about.
> I generally do not connect to web sites from my own machine, aside from a few sites I have some special relationship with. I usually fetch web pages from other sites by sending mail to a program (see git://git.gnu.org /womb/hacks.git) that fetches them, much like wget, and then mails them back to me. Then I look at them using a web browser, unless it is easy to see the text in the HTML page directly. I usually try lynx first, then a graphical browser if the page needs it (using konqueror, which won't fetch from other sites in such a situation).
https://stallman.org/stallman-computing.html
But there are other groups of people for which this is relevant: Blind or otherwise visually impaired people depending on screen readers or similar. Those don't have a good choice and abusing text there makes the experience unbearable.
That said, I use NoScript with 'Forbid Font-Face' enabled, so a lot of the time I see squiggles instead of icons. But that's my choice, and I'm almost certainly in the minority, so I'm not angry about sites that use fonts instead. SVG probably will come to replace font icons, but for now, they've been really helpful for a lot of small sites.
Most icon fonts use PUA codepoints to avoid issues with screen readers. If you're not going to use icon fonts, what are you going to use? Images? CSS Backgrounds? Inline SVGs?
Screen readers can't read any of them. Thankfully there are ways to make all of these accessible, with things like ARIA attributes.
fill: currentColor;
I can only hope that his is mostly ignorance.
It's only correct to infer that web developers care less if the cost of supporting either is the same.
(Also many legally blind people use graphical browsers; legally blind is not the same as "unable to see anything").
Is that not typical?
(That said, if you're using webfonts for icons you should be using the unicode Private Use Area.)
<svg> may not work for people like me who disable javascript. It introduces potential security issues (in my understanding). It's complex, meaning it's hard to guess how it will interact with tools that want to access the page (like for visually impaired or for other purposes).
I don't like these things, so I'll try to make a stand and not use it. Of course, I only have that luxury because I don't make websites for a living.
SVG works for me with JS disabled (using Firefox on OS-X). Do you have any pointers on when/why SVG wouldn't work without JS?
You have the same resources and APIs (can you call HTML attributes an 'API'?) available to make the usage of icon fonts friendly for screen readers.
<i class="fa fa-globe" aria-label="Picture of a globe"></i>
<img svg="globe.svg" alt="Picture of a globe">
The i element represents a span of text offset from its
surrounding content without conveying any extra emphasis or
importance, and for which the conventional typographic
presentation is italic text; for example, a taxonomic
designation, a technical term, an idiomatic phrase from
another language, a thought, or a ship name.
Using it without text strikes me as a hack, and one that is hostile to usability, among other problems. I understand why it would work, but it's abusing the technology as far as I can tell.
Since I've seen this in at least two comments now, can somebody explain to me why it's not considered an anti-pattern in 2016?
[edit: formatting]
I use <span> on all of my projects.
But I can't really tell if you're actually saying that the ability for web pages to be read aloud coherently is 'a use case that's not worth worrying about'.
<i class="fa fa-pizza" aria-hidden="true"></i>"The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts." [0]
Its use for text-as-icon is arguably, despite obviously not being a use classically set in italics, within the defined semantics of the <i> tag.
EDIT: Though FAs use isn't actually text-as-icon, it uses empty tag as an icon. That's not consistent with the semantics of the tag.
[0] https://html.spec.whatwg.org/multipage/semantics.html#the-i-...
In earlier versions of the HTML specification, the <i> tag was merely a presentational element used to display text in italics, much like the <b> tag was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance.
<img src="pizza.png" alt="" />I do wish they didn't overwrite the traditional <i> tag, but I guess we're supposed to be using <em> for semantic HTML.
So … it can be made to work with a single request then.
An SVG is scalable, cacheable and can contain any vector art you could wish for. And it doesn't use characters to represent images.
This is fundamentally different from icon fonts. twitter icon or mailbox icon are not meant to be used inside of text, so they have no business in fonts.
But fonts have hinting, so they look nice at low sizes and low resolutions. This is something that SVG is still missing.
Was their font just poorly designed?
Think for a moment about what Web Font users do: sprinkle garbage throughout their pages; run JavaScript to dynamically load stuff (and possible destroy the privacy and/or security of the client); dynamically update the page — all when a simple, semantic image could have done the trick.
It's kinda insane, like rendering a page by loading JavaScript to slowly append characters to the DOM.
Why, then, does one see all sorts of strange characters on web pages which use icon fonts?
In entire fairness, the evolution of language may well make this impossible, or nearly so, regardless of how you structure your content. It's not unreasonable to shoot for 100 years, though.
Are you aware that we're completely able to read documents from thousands of years ago? C.f. Caesar's Bellum Gallicum, which is about 2,050 years old.
As to why you wrote it — heh, we've all been there.