Is there any reason not to use a custom font for icons on a web site?

Question

I was curious how Imgur was rendering their upvote/downvote arrows:

I assumed they were images, but I found something that I did not expect:

A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:

Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.

I can imagine the reasons for:

• Your site uses a standard icon set that can be mapped to single-character codes.
• You only need control over foreground/background color for the icons.
• You want icons that scale the same as text.

I want to know any specific reasons against using this method.

In particular, I'm looking for answers that address any of the following:

• browser/platform compatibility
• future maintenance implications
• semantics
• performance
• standards compliance

The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.

I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?

However, I'm certain Imgur has thought all of this through already. So, why am I wrong?

Answer 1

Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.

Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.

To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.

As Mike 'Pomax' Kamermans put it:

"Fonts are for encoding vector graphics that are to be used in typesetting context. That can mean letters, or icons, or emoji"