1322209 - Not allowing pages to choose their own fonts breaks with *some* icon from e.g. fontawesome

Status: RESOLVED WONTFIX

(Core :: Layout: Text and Fonts, defect, P3)

Description

[paolo]

Attachment: fa-firefox-bug.PNG

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161129173726

Steps to reproduce:

- uncheck 'allow pages to use their own fonts'
- visit http://fontawesome.io/icons/
- any page with 'search' iconfont

ffox 50.0.2 on Windows XPSP3


Actual results:

a subset of icons don't display at all or display as '~' or other weird marks. The subset is:

(web type)
barcode 							
book 							
bookmark 							
camera 							
cog 							
close 							
clock-o 							
check 							
download 							
gear 							
film 							
flag 							
headphones 							
heart 							
home 							
lock 							
qrcode 							
power-off 							
remove 							
road 							
search 							
search-minus 							
search-plus 							
refresh 							
star 							
signal 							
print 							
tags 							
volume-down 							
volume-off 							
volume-up 							
tag 							
times 							
trash-o 							
user 							
star-o 							

(file type)
file-o 	

(spinner type)
cog 	
gear 	
refresh 					

(text editor)
repeat 	
th-large 	
list-alt 	
th-list 	
th 	
font 	
file-o 	

(directional)
arrow-circle-o-down 	
arrow-circle-o-up 						

(medical) 
heart 							


Expected results:

show the intended icons as for the rest of the set (after fix in bug 789788)

Comment 1

[Loic]

I can't reproduce it on Win 7.

Comment 2

[Jonathan Kew [:jfkthame]]

Is this still an issue? I can't seem to readily reproduce it.

Comment 3

[paolo]

(In reply to Jonathan Kew (:jfkthame) from comment #2)
> Is this still an issue? I can't seem to readily reproduce it.

yep, quickly re-checked http://fontawesome.io/icons/, same view as original attachment 
Firefox ESR 52.4.0 (32-bit) currenty

thx

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: screenshot showing Inspector used to check the font of the Search icon

Could you use the Element Inspector to check exactly what font is being used for the problematic elements? My guess is there's a locally-installed font that overlaps with the Private Use Area codepoints that FontAwesome is using.

The font used can be confirmed by selecting the relevant ::before pseudo-element in the Inspector, and looking at the Fonts tab (on the far right beyond Layout and Animations, may need to be chosen from drop-down menu if the panel isn't wide enough to see it). See attached screenshot, which shows FontAwesome being used there -- I believe in your case it'll be something different.

Comment 5

[paolo]

Attachment: inspector view on fa-headphone

Comment 6

[paolo]

Attachment: inspector view on fa-search

Comment 7

[paolo]

Attachment: inspector view on fa-send-o

Comment 8

[paolo]

(In reply to Jonathan Kew (:jfkthame) from comment #4)
 
> Could you use the Element Inspector to check exactly what font is being used

pls see attached views for a couple of icons that don't show and one that shows right


thx

Comment 9

[Jonathan Kew [:jfkthame]]

OK, so the problem is caused by the version of Arial you've got.

I looked into the character repertoire ('cmap' table) in a copy of Arial from Windows XP, and sure enough, it includes a whole bunch of codepoints in the Private Use area; a bunch of them seem to be used for variant forms of Hebrew characters, and there are others such as "fi" and "fl" ligatures, other accents, etc.

These codepoints conflict with what FontAwesome is using for its icons, so with the preference to "Allow pages to use their own fonts" unchecked, the browser's default font takes precedence over the page-supplied icon font.

It's not really appropriate for a standard system font to use the Private Use area like this; and more recent versions of Arial no longer do this. (E.g. I checked a copy from Windows 8.1, and there are no PUA codepoints present.)

So this is the result of a font bug on old Windows versions, and I don't think there's anything we can/will do about it in Firefox. In principle, I guess a workaround for the FontAwesome developers would be to check for such PUA characters in the default fonts Microsoft has shipped, and avoid use of those particular codepoints; but given that this no longer seems to be an issue with current OS versions, I don't expect there'll be much interest in pursuing it.

Comment 10

[paolo]

ok agree, solution seems a font set without that bug. Indeed I tried a bunch of fonts and e.g. the 'system' font would allow for all char-icons as expected. Not a good default (web)font though ...

thanx a lot @all!