@font-face for icons? �Compatibility research

Nov 21, 2013

We know some devices won’t display icon fonts: but how many people are really affected?

​

We decided to do some research to quantify things.

​

Sizing up the problem

• Which devices? We started by identifying which platforms/browsers don’t support @font-face.�
• Next, we tried to estimate the total number of users on these platforms based on available market data (taken with a grain of salt)

@font-face support + detection

Testing @font-face Support on Mobile and Tablet

​

Our own @font-face support research vs. Grunticon

Filament @font-face and Grunticon device testing results

​

No support for @font-face

• Opera Mini
• Nokia XPress browser
• Blackberry 4 & 5 - stock browser
• Android 2.1 - stock browser
• Windows Phone 7 - 7.8
• Android 4 - UCBrowser
• Symbian 10 - Nokia Browser 8.3.1.4
• WebOS - stock browser
• Android 2.1 - Dolphin

How many users for each?

• Opera Mini - 261 million
• Nokia XPress browser - 70 million
• Blackberry 4 & 5 - stock browser - 20 million [1]
• Android 2.1 - stock browser - 10 million [2]
• Windows Phone 7 - 7.8 - 10-15 million [3]
• Android 4 - UCBrowser - Need data
• Symbian 10 - Nokia Browser 8.3.1.4 - Need data
• WebOS - stock browser - Need data
• Android 2.1 - Dolphin - Need data

(P.S. - Help us find more accurate data, first pass)

(Rough) number of devices that don’t support @font-face:

At least

370 million

devices don’t � support @font-face

This is equal to double the number of iPads sold...

370 million

devices don’t � support @font-face

170 million

iPads worldwide

...half of all iOS devices sold...

370 million

devices don’t � support @font-face

700 million

Total iOS devices � worldwide

…and ⅓ of all Androids sold

370 million

devices don’t � support @font-face

700 million

Total iOS devices � worldwide

1 billion

Total Android � devices worldwide

Yikes. That’s a much bigger number than we expected.

​

So why do we care?

• When @font-face isn’t supported, icon fonts either appear as:
• a random character (A, 4, +, etc.)
• a cryptic symbol like (sup. P.U.A.)
• blank space (private use area)
• Using on ‘standard’ unicode characters (ex: ‘>’) as a fallback produces wildly different symbols across devices and fonts when @font-face isn’t supported. There are rarely ‘safe’ characters for most icons we use.

Use responsibly

If icon fonts are used, a fallback strategy is needed to prevent a broken experience in hundreds of millions of devices.�

• Create bitmap images for fallbacks, especially icon-only buttons
• Treat fonts as an optional enhancement and target only to capable devices via feature test
• Or use grunticon for vector icons

​